feat: add ScheduleDisplay component and wire up schedule page with Generator

2026-04-26 22:03:21 -07:00
parent 8f7ca1362a
commit 799f5e1c63
4 changed files with 138 additions and 13 deletions
@@ -0,0 +1,98 @@
+"use client"
+
+import Link from "next/link"
+
+interface Player {
+  id: number
+  name: string
+}
+
+interface BracketMatchup {
+  id: number
+  player1P1: Player | null
+  player1P2: Player | null
+  player2P1: Player | null
+  player2P2: Player | null
+  match: { id: number } | null
+  bracketPosition: number | null
+  status: string
+}
+
+interface TournamentRound {
+  id: number
+  roundNumber: number
+  status: string
+  bracketMatchups: BracketMatchup[]
+}
+
+export function ScheduleDisplay({ rounds }: { rounds: TournamentRound[] }) {
+  return (
+    <div className="space-y-6">
+      {rounds.map((round) => (
+        <div key={round.id} className="border border-gray-200 rounded-lg p-4">
+          <h3 className="text-lg font-semibold text-gray-900 mb-3">
+            Round {round.roundNumber}
+            <span className="ml-2 text-sm font-normal text-gray-500">
+              ({round.status})
+            </span>
+          </h3>
+
+          <div className="space-y-3">
+            {round.bracketMatchups.map((matchup) => {
+              const team1 = [
+                matchup.player1P1?.name,
+                matchup.player1P2?.name,
+              ]
+                .filter(Boolean)
+                .join(" + ")
+
+              const team2 = [
+                matchup.player2P1?.name,
+                matchup.player2P2?.name,
+              ]
+                .filter(Boolean)
+                .join(" + ")
+
+              const content = (
+                <div className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
+                  <div className="flex-1">
+                    <span className="font-medium text-gray-900">
+                      {team1 || "TBD"}
+                    </span>
+                    <span className="mx-3 text-gray-400">vs</span>
+                    <span className="font-medium text-gray-900">
+                      {team2 || "TBD"}
+                    </span>
+                  </div>
+                  <div className="text-sm text-gray-500">
+                    {matchup.status === "pending" ? (
+                      <span className="text-gray-400">Pending</span>
+                    ) : matchup.match ? (
+                      <span className="text-green-600">Completed</span>
+                    ) : (
+                      <span className="text-gray-400">{matchup.status}</span>
+                    )}
+                  </div>
+                </div>
+              )
+
+              if (matchup.match) {
+                return (
+                  <Link
+                    key={matchup.id}
+                    href={`/matches/${matchup.match.id}`}
+                    className="block hover:bg-gray-100 rounded-md transition-colors"
+                  >
+                    {content}
+                  </Link>
+                )
+              }
+
+              return <div key={matchup.id}>{content}</div>
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}