60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { Team, ThirdPlaceRow, teamName } from "@/lib/types";
|
|
import { Dictionary } from "@/lib/i18n";
|
|
|
|
export default function ThirdPlace({
|
|
rows, teams, secureTeams, dict,
|
|
}: { rows: ThirdPlaceRow[]; teams: Team[]; secureTeams?: string[]; dict: Dictionary }) {
|
|
const name = (id: string) => {
|
|
const t = teams.find((t) => t.id === id);
|
|
return teamName(t, "de");
|
|
};
|
|
const secureSet = secureTeams ? new Set(secureTeams) : null;
|
|
|
|
return (
|
|
<div className="third-wrap">
|
|
<p className="notice" style={{ marginBottom: 16 }}>
|
|
{dict.thirds.explanation}
|
|
</p>
|
|
<table className="third-table">
|
|
<thead>
|
|
<tr>
|
|
<th>{dict.table.rank}</th><th>{dict.table.group}</th><th>Team</th>
|
|
<th>{dict.table.matches}</th><th>{dict.table.points}</th><th>{dict.table.goalDiff}</th><th>{dict.table.goals}</th><th>{dict.table.status}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((r, i) => {
|
|
const isCut = i === 8; // erste nicht-qualifizierte Zeile
|
|
return (
|
|
<tr
|
|
key={r.teamId}
|
|
className={`third-row ${r.qualifies ? "qual" : ""} ${isCut ? "cut" : ""}`}
|
|
>
|
|
<td>{r.overallRank}</td>
|
|
<td>{r.group}</td>
|
|
<td className={r.played === 3 ? "team-complete" : ""} style={{ fontWeight: 600 }}>
|
|
{name(r.teamId)}
|
|
{secureSet?.has(r.teamId) && (
|
|
<span style={{ color: "var(--turf)", marginLeft: 6, fontSize: 13 }} title={dict.label.securelyQualified}>✓</span>
|
|
)}
|
|
</td>
|
|
<td>{r.played}</td>
|
|
<td className="pts">{r.points}</td>
|
|
<td>{r.goalDiff > 0 ? `+${r.goalDiff}` : r.goalDiff}</td>
|
|
<td>{r.goalsFor}:{r.goalsAgainst}</td>
|
|
<td>
|
|
<span className={`qual-badge ${r.qualifies ? "yes" : "no"}`}>
|
|
{r.qualifies ? dict.thirds.advances : dict.thirds.eliminated}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|