Fixtures Knockout Bracket

1"use client";
2// beui.dev/components/blocks/knockout-bracket
3 
4import { ChevronLeft, ChevronRight, Shield } from "lucide-react";
5import { motion, useReducedMotion } from "motion/react";
6import { useMemo, useState } from "react";
7import { EASE_OUT } from "@/lib/ease";
8import { cn } from "@/lib/utils";
9 
10export type Team = {
11  name: string;
12  /**
13   * Any square image URL — club crest, org mark, player photo. Wins over `code`.
14   * Drawn as-is on the card surface, so a transparent-background mark inked for
15   * one theme disappears in the other: ship artwork that reads on both, or pick
16   * the URL yourself from your theme state.
17   */
18  logo?: string;
19  /** ISO 3166-1 alpha-2 code, loaded from flagcdn.com (England is gb-eng). Used when `logo` is absent. */
20  code?: string;
21};
22 
23export type MatchSide = {
24  /** null renders a TBD slot with a shield icon. */
25  team: Team | null;
26  score: number | null;
27  /** Present on both sides to render Google-style shootout scores — 1 (3). */
28  penalties?: number | null;
29};
30 
31export type Match = {
32  id: string;
33  /** Kick-off day, already formatted. Omit it and the card drops the date row. */
34  date?: string;
35  time?: string;
36  /** Omit it and a match with a `winner` counts as finished. */
37  status?: "finished" | "upcoming";
38  home: MatchSide;
39  away: MatchSide;
40  /** Decides the marker and which side dims. */
41  winner?: "home" | "away";
42  /** Replaces the derived result chip ("FT", "FT (P)") — e.g. "AET", "BO5", "Forfeit". */
43  badge?: string;
44};
45 
46export type Round = {
47  /** Shown as the column header — "Round of 32", "Upper bracket final", "Last 8". */
48  name: string;
49  matches: Match[];
50};
51 
52export interface KnockoutBracketProps {
53  /**
54   * The whole draw, ordered widest round first. Any single-elimination
55   * tournament fits: each round holds half the matches of the one before it
56   * (16 → 8 → 4 → 2 → 1) and `rounds[r].matches[k]` is fed by matches `2k` and
57   * `2k + 1` of the round before it. Two rounds are enough.
58   */
59  rounds: Round[];
60  /** Round shown as the leftmost column on mount. Defaults to 1, clamped to the valid range. */
61  initialRound?: number;
62  /** Third place play-off, rendered under the bracket instead of inside it. */
63  thirdPlace?: Match;
64  /** Heading over `thirdPlace`. Defaults to "Third place play-off". */
65  thirdPlaceLabel?: string;
66  className?: string;
67}
68 
69 
70// Card geometry drives the whole computed layout — every later match sits at the
71// … truncated