"use client"; import type { ComponentProps, CSSProperties, ReactNode } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { cn } from "@/lib/utils"; export type MatchFeedEvent = { /** Stable across re-renders; the feed animates by this key. */ id: string | number; /** Clock label, printed as given: "43'", "45+4'", "HT". */ minute?: ReactNode; /** What happened: "Goal for Chelsea". */ label: ReactNode; /** Who it happened to, usually the player. */ detail?: ReactNode; }; export type MatchFeedProps = Omit, "children"> & { /** Oldest first unless `newestFirst` is set. */ events: MatchFeedEvent[]; /** Lines held in view. The feed is exactly this tall; older lines leave the top. */ lines?: number; /** Set when `events[0]` is the latest line rather than the earliest. */ newestFirst?: boolean; /** Height of a single line. Also settable as `--match-feed-row` in `className`. */ rowHeight?: string; /** Soft edge at the top of the window. */ fade?: boolean; /** Draw a line yourself; the default renders the minute, accent and text. */ children?: (event: MatchFeedEvent, index: number) => ReactNode; }; /** * A live match ticker. New lines enter at the bottom and push the feed up, the * line leaving the window fading as it goes. The window is `lines` tall, so the * component holds its height from the first event onwards. */ export function MatchFeed({ events, lines = 5, newestFirst = false, rowHeight, fade = true, className, style, children, ...props }: MatchFeedProps) { const reduceMotion = useReducedMotion(); const ordered = newestFirst ? [...events].reverse() : events; // One line past the window, so the departing line has somewhere to fade out. const visible = ordered.slice(-(lines + 1)); const overflowing = visible.length > lines; return (

{visible.map((event, index) => ( {children ? children(event, index) : } ))}

); } function MatchFeedLine({ minute, label, detail }: MatchFeedEvent) { return ( {minute} {label} {detail ? {detail} : null} ); } export function MatchFeedItem({ className, ...props }: ComponentProps<"div">) { return (

); } export function MatchFeedMinute({ className, ...props }: ComponentProps<"span">) { return ( ); } export function MatchFeedLabel({ className, ...props }: ComponentProps<"span">) { return ( ); } export function MatchFeedDetail({ className, ...props }: ComponentProps<"span">) { return ( ); }

Five lines in view

Three lines

Code