Match Timeline

1import { CircleDot, Square } from "lucide-react"
2import type { ComponentType } from "react"
3 
4import { cn } from "@/lib/utils"
5 
6function GoalPostIcon({ className }: { className?: string }) {
7  return (
8    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
9      width="457.338px" height="457.338px" viewBox="0 0 457.338 457.338"
10      className={cn(className, "scale-125")}>
11      <g>
12        <g>
13          <path d="M13.738,345.63c7.59,0,13.739-6.155,13.739-13.737V140.401c7.348,1.741,17.236,5.759,27.429,14.942
14			c22.019,19.841,48.255,66.575,48.255,176.549c0,7.582,6.146,13.737,13.74,13.737c7.59,0,13.737-6.155,13.737-13.737
15			c0-92.563-17.805-157.244-52.874-192.601h246.218v192.601c0,7.582,6.14,13.737,13.737,13.737c7.591,0,13.737-6.155,13.737-13.737
16			V139.834c7.515,1.351,18.631,5.144,30.145,15.517c22.024,19.841,48.262,66.576,48.262,176.549c0,7.582,6.146,13.737,13.737,13.737
17			c7.598,0,13.737-6.155,13.737-13.737c0-97.324-19.648-163.908-58.396-197.893c-17.909-15.715-35.87-20.514-47.484-21.841v-0.338
18			h-3.734c-3.687-0.22-6.368-0.114-7.843,0H21.029c-3.689-0.22-6.376-0.114-7.843,0H0v220.08C0,339.475,6.144,345.63,13.738,345.63z
19			"/>
20        </g>
21      </g>
22    </svg>
23  )
24}
25 
26export interface MatchTimelineEntry {
27  id: string
28  /**
29   * Pre-formatted time label, e.g. "45+2'", "90+3'". Not every sport has a
30   * meaningful running clock, so this is a string the caller formats
31   * rather than a raw minute count; omit when there's none.
32   */
33  time?: string
34  /**
35   * Event kind: open string, sport-specific (e.g. "goal", "yellow-card").
36   * Unrecognized types get a generic marker rather than being rejected,
37   * since new event types can appear without warning.
38   */
39  type: string
40  side: "home" | "away" | "match"
41  description: string
42  /** Goal-type events only. Renders a running score pill instead of plain text. */
43  score?: { home: number; away: number }
44  /** "match"-side entries only. Colors the divider red instead of muted, for the current live period. */
45  live?: boolean
46}
47 
48export interface MatchTimelineProps {
49  /** Entries ordered most-recent-first. */
50  entries: MatchTimelineEntry[]
51  className?: string
52}
53 
54const knownEventIcon: Record<string, ComponentType<{ className?: string }>> = {
55  goal: CircleDot,
56  "own-goal": CircleDot,
57  "yellow-card": Square,
58  "red-card": Square,
59  penalty: GoalPostIcon,
60}
61 
62const knownEventColor: Record<string, string> = {
63  goal: "text-foreground",
64  "own-goal": "text-destructive",
65// … truncated