Match Card Compact

1import { cn } from "@/lib/utils"
2import { EntityImage } from "@/registry/mrdoge-ui/entity-image/entity-image"
3 
4export interface MatchCardCompactTeam {
5  name: string
6  logoUrl?: string
7}
8 
9export interface MatchCardCompactProps {
10  home: MatchCardCompactTeam
11  away: MatchCardCompactTeam
12  /** Shown next to the crests. Defaults to "home vs away". */
13  label?: string
14  /**
15   * Shown right-aligned, e.g. a score. Takes priority over `kickoff` when
16   * both are set, so a live score can override the date once one exists.
17   */
18  info?: string
19  /** Formatted and shown right-aligned when `info` isn't set, e.g. "Aug 9". No time-of-day or "today" special-casing — this is a compact identifier row, not the primary place a match's kickoff lives (that's Match Card / Match Highlight's job). */
20  kickoff?: Date | string
21  className?: string
22}
23 
24function formatKickoff(kickoff: Date | string) {
25  const date = typeof kickoff === "string" ? new Date(kickoff) : kickoff
26  return date.toLocaleDateString(undefined, { month: "short", day: "numeric" })
27}
28 
29/**
30 * A minimal match row: overlapping crests plus a label, no
31 * score/status/odds. Deliberately lighter than Match Card, for contexts
32 * that just need to identify a match at a glance: a dropdown item, a
33 * group header. See Bet Slip's `BetSlipMatchGroup` and Match Highlight's
34 * competition dropdown.
35 */
36export function MatchCardCompact({ home, away, label, info, kickoff, className }: MatchCardCompactProps) {
37  const trailing = info ?? (kickoff ? formatKickoff(kickoff) : undefined)
38  return (
39    <div className={cn("flex items-center gap-2", className)}>
40      <div className="flex shrink-0 gap-2">
41        <EntityImage src={home.logoUrl} name={home.name} size="sm"  />
42        <EntityImage src={away.logoUrl} name={away.name} size="sm" />
43      </div>
44      <span className="min-w-0 flex-1 truncate text-sm font-medium">{label ?? `${home.name} vs ${away.name}`}</span>
45      {trailing ? <span className="shrink-0 text-xs tabular-nums text-muted-foreground">{trailing}</span> : null}
46    </div>
47  )
48}