Match Card

1"use client"
2 
3import { cn } from "@/lib/utils"
4import { EntityImage } from "@/registry/mrdoge-ui/entity-image/entity-image"
5import {
6  OddsSelector,
7  type OddsOption,
8} from "@/registry/mrdoge-ui/odds-selector/odds-selector"
9 
10export type MatchCardStatus =
11  | "scheduled"
12  | "live"
13  | "paused"
14  | "intermission"
15  | "interrupted"
16  | "finished"
17 
18export interface MatchCardTeam {
19  name: string
20  logoUrl?: string
21  /** Shown as a small red-card marker (position set by MatchCardProps.redCardPosition) once the match is live or finished. */
22  redCards?: number
23}
24 
25export interface MatchCardOdds {
26  /** Market name, e.g. "Match Result". Not currently rendered. */
27  market: string
28  options: OddsOption[]
29}
30 
31export interface MatchCardDataProps {
32  loading?: false
33  status: MatchCardStatus
34  kickoff?: Date | string
35  elapsed?: string
36  /**
37   * Clock format for the kickoff time.
38   *
39   * @defaultValue "24h"
40   */
41  timeFormat?: "12h" | "24h"
42  home: MatchCardTeam
43  away: MatchCardTeam
44  homeScore?: number
45  awayScore?: number
46  /**
47   * Where the red-card marker renders relative to each team row: "left"
48   * (next to the team name) or "right" (next to the score).
49   *
50   * @defaultValue "right"
51   */
52  redCardPosition?: "left" | "right"
53  /**
54   * Renders a labeled odds card when provided. Any market works: Match
55   * Card doesn't care which one, it just needs a name and options.
56   */
57  odds?: MatchCardOdds
58  /** Shows a skeleton in the odds area while set. Ignored once `odds` is provided. */
59  oddsLoading?: boolean
60  /**
61   * Where the odds card renders. Falls back to "bottom" below a `@lg`
62   * (32rem) container width.
63   *
64   * @defaultValue "bottom"
65   */
66  oddsPosition?: "bottom" | "right"
67  selectedOddsId?: string
68  /** Called with the pressed option's id, or `undefined` when pressing the already-selected option deselects it. */
69  onSelectOdds?: (id: string | undefined) => void
70  className?: string
71}
72 
73interface MatchCardLoadingProps {
74  /** Renders a skeleton with the same dimensions instead; no other prop is needed. */
75  loading: true
76  /** Reserves space for an odds row/column in the skeleton too. */
77  oddsLoading?: boolean
78  /** Same as MatchCardDataProps.oddsPosition. */
79  oddsPosition?: "bottom" | "right"
80  className?: string
81}
82 
83export type MatchCardProps = MatchCardDataProps | MatchCardLoadingProps
84 
85function formatKickoff(kickoff: Date | string, timeFormat: "12h" | "24h") {
86  const date = typeof kickoff === "string" ? new Date(kickoff) : kickoff
87// … truncated