NilsBriggen
51dfe00216
- Match cards surface the model's pre-match expectation (favoured team + win%).
- Everything is now clickable: group-table + odds-table team rows → team
profiles; bracket matches → match pages; match ↔ team cross-links.
- New /teams hub: all 48 nations ranked by title odds, linking to profiles
(reachable from Groups + every team link; back-links point here).
- Predict → Methodology link ('How & how accurate'); cohesive hover/transition
polish across cards.
- 26 tests pass; build clean.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
import { Link } from '@tanstack/react-router';
|
|
import { Users } from 'lucide-react';
|
|
import { PageHeader } from '@/components/ui/PageHeader';
|
|
import { GroupTable } from '@/components/GroupTable';
|
|
import { useTournamentStore } from '@/stores/tournamentStore';
|
|
|
|
export function GroupsPage() {
|
|
const snapshot = useTournamentStore((s) => s.snapshot);
|
|
const tables = snapshot?.tables ?? {};
|
|
const groups = Object.keys(tables).sort();
|
|
|
|
return (
|
|
<div>
|
|
<PageHeader
|
|
title="Groups"
|
|
subtitle="All 12 groups · top 2 advance, plus the 8 best third-placed teams."
|
|
actions={
|
|
<Link to="/teams" className="inline-flex items-center gap-1.5 rounded-md border border-line px-3 py-1.5 text-sm font-medium text-muted hover:bg-elevated hover:text-ink">
|
|
<Users size={15} /> All 48 teams
|
|
</Link>
|
|
}
|
|
/>
|
|
{groups.length ? (
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{groups.map((g) => (
|
|
<GroupTable key={g} group={g} rows={tables[g]!} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<div key={i} className="h-44 animate-pulse rounded-xl border border-line bg-panel" />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-5 flex items-center gap-4 text-xs text-faint">
|
|
<span className="inline-flex items-center gap-1.5">
|
|
<span className="h-2.5 w-2.5 rounded bg-accent-glow ring-1 ring-accent-deep/40" /> Top 2 — advance
|
|
</span>
|
|
<span className="inline-flex items-center gap-1.5">
|
|
<span className="h-2.5 w-2.5 rounded bg-gold/20 ring-1 ring-gold/40" /> 3rd — best-third race
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|