Leaderboard Card

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6import {
7  LeaderboardPodium,
8  type LeaderboardRanking as LeaderboardPodiumRanking,
9} from "@/components/ui/leaderboard-podium"
10import {
11  LeaderboardRankings,
12  type LeaderboardRankingItem,
13} from "@/components/ui/leaderboard-rankings"
14 
15interface LeaderboardRunOption {
16  id: string
17  label: string
18}
19 
20interface LeaderboardCardProps extends React.HTMLAttributes<HTMLDivElement> {
21  title?: string
22  fromDate: string | Date
23  toDate: string | Date
24  podiumRankings: LeaderboardPodiumRanking[]
25  rankings: LeaderboardRankingItem[]
26  currentUserId?: string
27  runOptions?: LeaderboardRunOption[]
28  selectedRunId?: string
29  onRunChange?: (runId: string) => void
30}
31 
32function formatRangeDate(date: string | Date) {
33  const parsed = date instanceof Date ? date : new Date(date)
34  if (Number.isNaN(parsed.getTime())) return ""
35 
36  return parsed.toLocaleDateString(undefined, {
37    month: "short",
38    day: "numeric",
39    year: "numeric",
40  })
41}
42 
43const LeaderboardCard = React.forwardRef<HTMLDivElement, LeaderboardCardProps>(
44  (
45    {
46      className,
47      title = "Leaderboard",
48      fromDate,
49      toDate,
50      podiumRankings,
51      rankings,
52      currentUserId,
53      runOptions,
54      selectedRunId,
55      onRunChange,
56      ...props
57    },
58    ref
59  ) => {
60    const fromLabel = formatRangeDate(fromDate)
61    const toLabel = formatRangeDate(toDate)
62    const resolvedRunId = selectedRunId ?? runOptions?.[0]?.id ?? ""
63    const hasOnRunChange = Boolean(onRunChange)
64    const [localRunId, setLocalRunId] = React.useState(resolvedRunId)
65 
66    React.useEffect(() => {
67      if (hasOnRunChange) return
68      setLocalRunId(resolvedRunId)
69    }, [hasOnRunChange, resolvedRunId])
70 
71    const activeRunId = hasOnRunChange ? resolvedRunId : localRunId
72 
73    return (
74      <div
75        ref={ref}
76        className={cn("bg-card rounded-2xl border p-6 shadow-sm", className)}
77        {...props}
78      >
79        <div className="mb-6 flex items-start justify-between gap-4">
80          <div className="space-y-1">
81            <h3 className="text-xl font-semibold">{title}</h3>
82            <p className="text-muted-foreground text-sm">
83              {fromLabel} - {toLabel}
84            </p>
85          </div>
86 
87          {runOptions && runOptions.length > 0 ? (
88            <select
89              aria-label="Select leaderboard run"
90              value={activeRunId}
91              onChange={(e) => {
92                if (onRunChange) {
93// … truncated