Update some styling and add more team cards

Author: ppost0

app/page.tsx

@@ -2,6 +2,9 @@
 import { useEffect, useState } from "react";
 import PatriotsCard from "@/components/PatriotsCard";
 import Header from "@/components/Header";
+import PhoenixSunsCard from "@/components/SunsCard";
+import NewYorkMetsCard from "@/components/MetsCard";
+import ManchesterUnitedCard from "@/components/UnitedCard";
 
 interface UpcomingGame {
   name: string;
@@ -56,6 +59,14 @@ export default function Home() {
           teamLogo={patriotsData?.teamLogo || ''}
           nextGame={patriotsData?.nextGame || null}
         />
+        <PhoenixSunsCard
+        wins={100}
+        losses={100}
+        teamLogo=""
+        nextGame={new Date}
+        />
+        <NewYorkMetsCard/>
+        <ManchesterUnitedCard/>
       </div>
     </div>
   );

components/MetsCard.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+interface UpcomingGame {
+  name: string;
+  date: string;
+  time: string;
+  week: number;
+  opponentLogo: string;
+}
+
+interface NewYorkMetsCardProps {
+  wins: number;
+  losses: number;
+  nextGame: UpcomingGame | null;
+  teamLogo: string;
+}
+
+const NewYorkMetsCard: React.FC<NewYorkMetsCardProps> = ({ wins, losses, teamLogo, nextGame }) => {
+  return (
+    <div className="bg-[#002D72] border rounded-lg p-6 shadow-md">
+      <div className="flex items-center justify-around">
+        <img src={teamLogo} alt="New York Mets Logo" className="w-40 h-40" />
+        <div className="flex items-center flex-col gap-2">
+          <h2 className="text-2xl font-bold">New York Mets</h2>
+          <p className="text-2xl text-neutral-300">{wins} - {losses}</p>
+        </div>
+      </div>
+      {nextGame ? (
+        <div className="mt-4">
+          <h3 className="font-semibold px-2 text-gray-200">Next Game:</h3>
+          <div className="flex items-center gap-4 px-2">
+            <img src={nextGame.opponentLogo} alt={`${nextGame.name} Logo`} className="w-14 h-14" />
+            <div>
+              <p className='text-gray-200'>{nextGame.name}</p>
+              <p className="text-sm text-gray-500">{nextGame.date} at {nextGame.time} (Week {nextGame.week})</p>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <p className="text-gray-500">No upcoming games</p>
+      )}
+    </div>
+  );
+};
+
+export default NewYorkMetsCard;

components/SunsCard.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+interface UpcomingGame {
+  name: string;
+  date: string;
+  time: string;
+  week: number;
+  opponentLogo: string;
+}
+
+interface PhoenixSunsCardProps {
+  wins: number;
+  losses: number;
+  nextGame: UpcomingGame | null;
+  teamLogo: string;
+}
+
+const PhoenixSunsCard: React.FC<PhoenixSunsCardProps> = ({ wins, losses, teamLogo, nextGame }) => {
+  return (
+    <div className="bg-[#5A2D91] border rounded-lg p-6 shadow-md">
+      <div className="flex items-center justify-around">
+        <img src={teamLogo} alt="Phoenix Suns Logo" className="w-40 h-40" />
+        <div className="flex items-center flex-col gap-2">
+          <h2 className="text-2xl font-bold">Phoenix Suns</h2>
+          <p className="text-2xl text-neutral-300">{wins} - {losses}</p>
+        </div>
+      </div>
+      {nextGame ? (
+        <div className="mt-4">
+          <h3 className="font-semibold px-2 text-gray-200">Next Game:</h3>
+          <div className="flex items-center gap-4 px-2">
+            <img src={nextGame.opponentLogo} alt={`${nextGame.name} Logo`} className="w-14 h-14" />
+            <div>
+              <p className='text-gray-200'>{nextGame.name}</p>
+              <p className="text-sm text-gray-500">{nextGame.date} at {nextGame.time} (Week {nextGame.week})</p>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <p className="text-gray-500">No upcoming games</p>
+      )}
+    </div>
+  );
+};
+
+export default PhoenixSunsCard;

components/UnitedCard.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+interface UpcomingGame {
+  name: string;
+  date: string;
+  time: string;
+  week: number;
+  opponentLogo: string;
+}
+
+interface ManchesterUnitedCardProps {
+  wins: number;
+  losses: number;
+  nextGame: UpcomingGame | null;
+  teamLogo: string;
+}
+
+const ManchesterUnitedCard: React.FC<ManchesterUnitedCardProps> = ({ wins, losses, teamLogo, nextGame }) => {
+  return (
+    <div className="bg-[#DA291C] border rounded-lg p-6 shadow-md">
+      <div className="flex items-center justify-around">
+        <img src={teamLogo} alt="Manchester United Logo" className="w-40 h-40" />
+        <div className="flex items-center flex-col gap-2">
+          <h2 className="text-2xl font-bold">Manchester United</h2>
+          <p className="text-2xl text-neutral-300">{wins} - {losses}</p>
+        </div>
+      </div>
+      {nextGame ? (
+        <div className="mt-4">
+          <h3 className="font-semibold px-2 text-gray-200">Next Game:</h3>
+          <div className="flex items-center gap-4 px-2">
+            <img src={nextGame.opponentLogo} alt={`${nextGame.name} Logo`} className="w-14 h-14" />
+            <div>
+              <p className='text-gray-200'>{nextGame.name}</p>
+              <p className="text-sm text-gray-500">{nextGame.date} at {nextGame.time} (Week {nextGame.week})</p>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <p className="text-gray-500">No upcoming games</p>
+      )}
+    </div>
+  );
+};
+
+export default ManchesterUnitedCard;

components/ui/button.tsx

@@ -54,3 +54,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 Button.displayName = "Button"
 
 export { Button, buttonVariants }
+