feat: adjust team logo size

Also allow the team logo to be sized differently.

app/components/TeamInfo/index.tsx

@@ -20,7 +20,7 @@ export const TeamInfo = ({
   teamRecord,
 }: TeamInfoProps) => (
   <div className="flex w-1/3 w-16 flex-col items-center text-center">
-    <TeamLogo teamAbbreviation={teamAbbrev} teamName={teamName} />
+    <TeamLogo teamAbbreviation={teamAbbrev} teamName={teamName} size="lg" />
     <TeamName
       isGameInProgress={isGameInProgress}
       isGoaliePulled={isGoaliePulled}

app/components/TeamLogo/index.tsx

@@ -1,15 +1,32 @@
+import type { Sizes } from "../sizes";
+
 export type TeamLogoProps = {
   readonly teamAbbreviation: string;
   readonly teamName: string;
+  readonly size?: Sizes;
+};
+
+type SizeMap = {
+  [key in Sizes]: string;
 };
 
-export const TeamLogo = ({ teamAbbreviation, teamName }: TeamLogoProps) => {
+export const TeamLogo = ({
+  teamAbbreviation,
+  teamName,
+  size = "sm",
+}: TeamLogoProps) => {
+  const sizeVariants: SizeMap = {
+    lg: "h-16 w-16",
+    md: "h-12 w-12",
+    sm: "h-8 w-8",
+  };
+
   return (
     <img
       alt={`${teamName} logo`}
       role="presentation"
       src={`https://assets.nhle.com/logos/nhl/svg/${teamAbbreviation}_light.svg`}
-      className="h-12 w-12"
+      className={`${sizeVariants[size]}`}
     />
   );
 };

app/components/sizes.ts

@@ -0,0 +1 @@
+export type Sizes = "sm" | "md" | "lg";

package.json

@@ -21,7 +21,8 @@
     "test:watch": "TZ=UTC jest --watch --maxWorkers=25%",
     "test:ci": "TZ=UTC jest --runInBand",
     "typecheck": "tsc -b",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "run-p -s 'dev:css' 'storybook:run'",
+    "storybook:run": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {