Leaderboard Rankings

1"use client"
2 
3import * as React from "react"
4import {
5  ChevronLeft,
6  ChevronRight,
7  CircleEllipsisIcon,
8  Crown,
9  EllipsisIcon,
10  TrendingDown,
11  TrendingUp,
12} from "lucide-react"
13 
14import { cn } from "@/lib/utils"
15import { Button } from "@/components/ui/button"
16 
17interface LeaderboardRankingItem {
18  userId: string
19  userName: string | null
20  rank: number
21  value: number
22  byline?: string | null
23  avatarUrl?: string | null
24  rankChange?: number
25  displayed?: boolean
26}
27 
28interface LeaderboardRankingsProps extends React.HTMLAttributes<HTMLDivElement> {
29  rankings: LeaderboardRankingItem[]
30  onUserClick?: (ranking: LeaderboardRankingItem) => void
31  currentUserId?: string
32  showPagination?: boolean
33  defaultPageSize?: 10 | 25 | 50 | 100
34}
35 
36const crownColorMap = {
37  1: "text-rank-1",
38  2: "text-rank-2",
39  3: "text-rank-3",
40} as const
41 
42const pageSizeOptions = [10, 25, 50, 100] as const
43 
44type LeaderboardRow =
45  | { type: "ranking"; ranking: LeaderboardRankingItem }
46  | { type: "ellipsis"; key: string }
47 
48function formatLeaderboardValue(value: number) {
49  if (value >= 1000000) return `${(value / 1000000).toFixed(1)}m`
50  if (value >= 1000) return `${(value / 1000).toFixed(1)}k`
51  return value.toLocaleString()
52}
53 
54const LeaderboardRankings = React.forwardRef<
55  HTMLDivElement,
56  LeaderboardRankingsProps
57>(
58  (
59    {
60      className,
61      rankings,
62      onUserClick,
63      currentUserId,
64      showPagination = false,
65      defaultPageSize = 10,
66      ...props
67    },
68    ref
69  ) => {
70    const [pageSize, setPageSize] = React.useState<10 | 25 | 50 | 100>(
71      defaultPageSize
72    )
73    const [currentPage, setCurrentPage] = React.useState(1)
74 
75    const totalPages = Math.max(1, Math.ceil(rankings.length / pageSize))
76 
77    React.useEffect(() => {
78      setCurrentPage(1)
79    }, [pageSize])
80 
81    React.useEffect(() => {
82      if (currentPage > totalPages) {
83        setCurrentPage(totalPages)
84      }
85    }, [currentPage, totalPages])
86 
87    const pagedRankings = showPagination
88      ? rankings.slice((currentPage - 1) * pageSize, currentPage * pageSize)
89      : rankings
90 
91    const rows = React.useMemo<LeaderboardRow[]>(() => {
92      const nextRows: LeaderboardRow[] = []
93      let hiddenRunCount = 0
94 
95      pagedRankings.forEach((ranking, index) => {
96        const isDisplayed = ranking.displayed !== false
97        if (!isDisplayed) {
98          hiddenRunCount += 1
99          return
100        }
101 
102        if (hiddenRunCount > 0) {
103// … truncated