flags

app/page.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { useEffect, useState, useCallback } from "react";
-import { GroupTable, Match, Team, ThirdPlaceRow } from "@/lib/types";
+import { GroupId, GroupTable, Match, Team, ThirdPlaceRow } from "@/lib/types";
 import { ThirdAssignment } from "@/lib/bracket";
 import Groups from "./components/Groups";
 import ThirdPlace from "./components/ThirdPlace";
 import Bracket from "./components/Bracket";
+import Fixtures from "./components/Fixtures";
 
 interface ApiData {
   updatedAt: string;
@@ -17,12 +18,14 @@ interface ApiData {
   annexResolved: boolean;
 }
 
-type Tab = "groups" | "thirds" | "bracket";
+type Tab = "groups" | "fixtures" | "thirds" | "bracket";
 
 export default function Home() {
   const [data, setData] = useState<ApiData | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [tab, setTab] = useState<Tab>("groups");
+  // Zuletzt gewählte Gruppe für den Spiele-Tab. null = noch keine gewählt.
+  const [fixturesGroup, setFixturesGroup] = useState<GroupId | null>(null);
 
   const load = useCallback(async () => {
     try {
@@ -44,6 +47,12 @@ export default function Home() {
     return () => clearInterval(id);
   }, [load]);
 
+  // Klick auf einen Gruppen-Header: Gruppe merken und zum Spiele-Tab wechseln.
+  const openGroupFixtures = useCallback((g: GroupId) => {
+    setFixturesGroup(g);
+    setTab("fixtures");
+  }, []);
+
   const anyLive = data?.matches.some(
     (m) => m.status === "LIVE" || m.status === "IN_PLAY" || m.status === "PAUSED",
   );
@@ -72,6 +81,12 @@ export default function Home() {
           <button className={`tab ${tab === "groups" ? "active" : ""}`} onClick={() => setTab("groups")}>
             Gruppen
           </button>
+          <button
+            className={`tab ${tab === "fixtures" ? "active" : ""}`}
+            onClick={() => { if (!fixturesGroup) setFixturesGroup("A"); setTab("fixtures"); }}
+          >
+            {fixturesGroup ? `Spiele – Gruppe ${fixturesGroup}` : "Spiele"}
+          </button>
           <button className={`tab ${tab === "thirds" ? "active" : ""}`} onClick={() => setTab("thirds")}>
             Drittplatzierte
           </button>
@@ -96,7 +111,16 @@ export default function Home() {
           )}
 
           {data && tab === "groups" && (
-            <Groups tables={data.groupTables} teams={data.teams} matches={data.matches} />
+            <Groups
+              tables={data.groupTables} teams={data.teams} matches={data.matches}
+              onOpenGroup={openGroupFixtures}
+            />
+          )}
+          {data && tab === "fixtures" && fixturesGroup && (
+            <Fixtures
+              group={fixturesGroup} teams={data.teams} matches={data.matches}
+              onSelectGroup={setFixturesGroup}
+            />
           )}
           {data && tab === "thirds" && (
             <ThirdPlace rows={data.thirdTable} teams={data.teams} />