flags

app/components/Groups.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { GroupTable, Match, Team } from "@/lib/types";
+import { GroupId, GroupTable, Match, Team } from "@/lib/types";
+import Flag from "./Flag";
 
 function teamById(teams: Team[], id: string) {
   return teams.find((t) => t.id === id);
@@ -13,24 +14,31 @@ function liveMatchFor(group: string, matches: Match[]) {
 }
 
 export default function Groups({
-  tables, teams, matches,
-}: { tables: GroupTable[]; teams: Team[]; matches: Match[] }) {
+  tables, teams, matches, onOpenGroup,
+}: {
+  tables: GroupTable[]; teams: Team[]; matches: Match[];
+  onOpenGroup: (g: GroupId) => void;
+}) {
   return (
     <div className="group-grid">
       {tables.map((t) => {
         const live = liveMatchFor(t.group, matches);
         return (
           <div className="group-card" key={t.group}>
-            <div className="group-head">
+            <button
+              className="group-head group-head-btn"
+              onClick={() => onOpenGroup(t.group)}
+              title={`Spiele der Gruppe ${t.group} ansehen`}
+            >
               <span className="group-name">Gruppe {t.group}</span>
               <span className="group-tag">
-                {live ? "● LIVE" : `${t.rows.reduce((a, r) => a + r.played, 0)} Spiele`}
+                {live ? "● LIVE" : "Spiele ansehen →"}
               </span>
-            </div>
+            </button>
             <table className="standings">
               <thead>
                 <tr>
-                  <th className="team">Team</th>
+                  <th className="team">Mannschaft</th>
                   <th>Sp</th><th>S</th><th>U</th><th>N</th>
                   <th>Tore</th><th>±</th><th>Pkt</th>
                 </tr>
@@ -43,8 +51,8 @@ export default function Groups({
                     <tr key={r.teamId}>
                       <td className="team">
                         <span className={`rankdot ${cls}`}>{r.rank}</span>
+                        <Flag team={team} size={20} />
                         <span className="team-name">{team?.name ?? r.teamId}</span>
-                        {team?.code && <span className="team-code">{team.code}</span>}
                       </td>
                       <td>{r.played}</td>
                       <td>{r.won}</td>