50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T25fb,"use client" import * as React from "react" import { ChevronLeft, ChevronRight, CircleEllipsisIcon, Crown, EllipsisIcon, TrendingDown, TrendingUp, } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" interface LeaderboardRankingItem { userId: string userName: string | null rank: number value: number byline?: string | null avatarUrl?: string | null rankChange?: number displayed?: boolean } interface LeaderboardRankingsProps extends React.HTMLAttributes { rankings: LeaderboardRankingItem[] onUserClick?: (ranking: LeaderboardRankingItem) => void currentUserId?: string showPagination?: boolean defaultPageSize?: 10 | 25 | 50 | 100 } const crownColorMap = { 1: "text-rank-1", 2: "text-rank-2", 3: "text-rank-3", } as const const pageSizeOptions = [10, 25, 50, 100] as const type LeaderboardRow = | { type: "ranking"; ranking: LeaderboardRankingItem } | { type: "ellipsis"; key: string } function formatLeaderboardValue(value: number) { if (value >= 1000000) return `${(value / 1000000).toFixed(1)}m` if (value >= 1000) return `${(value / 1000).toFixed(1)}k` return value.toLocaleString() } const LeaderboardRankings = React.forwardRef< HTMLDivElement, LeaderboardRankingsProps >( ( { className, rankings, onUserClick, currentUserId, showPagination = false, defaultPageSize = 10, ...props }, ref ) => { const [pageSize, setPageSize] = React.useState<10 | 25 | 50 | 100>( defaultPageSize ) const [currentPage, setCurrentPage] = React.useState(1) const totalPages = Math.max(1, Math.ceil(rankings.length / pageSize)) React.useEffect(() => { setCurrentPage(1) }, [pageSize]) React.useEffect(() => { if (currentPage > totalPages) { setCurrentPage(totalPages) } }, [currentPage, totalPages]) const pagedRankings = showPagination ? rankings.slice((currentPage - 1) * pageSize, currentPage * pageSize) : rankings const rows = React.useMemo(() => { const nextRows: LeaderboardRow[] = [] let hiddenRunCount = 0 pagedRankings.forEach((ranking, index) => { const isDisplayed = ranking.displayed !== false if (!isDisplayed) { hiddenRunCount += 1 return } if (hiddenRunCount > 0) { nextRows.push({ type: "ellipsis", key: `ellipsis-${index}` }) hiddenRunCount = 0 } nextRows.push({ type: "ranking", ranking }) }) if (hiddenRunCount > 0) { nextRows.push({ type: "ellipsis", key: "ellipsis-tail" }) } return nextRows }, [pagedRankings]) return (

{rows.map((row) => { if (row.type === "ellipsis") { return (

) } const ranking = row.ranking const displayName = ranking.userName || `User ${ranking.userId.slice(0, 6)}` const showCrown = ranking.rank <= 3 const crownColor = crownColorMap[ranking.rank as 1 | 2 | 3] const isCurrentUser = currentUserId === ranking.userId return (

onUserClick?.(ranking)} onKeyDown={ onUserClick ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault() onUserClick(ranking) } } : undefined } className={cn( "flex items-center gap-2 px-4 py-2", isCurrentUser && "border-primary bg-muted rounded-md border-2", onUserClick && "hover:bg-muted/40 cursor-pointer transition-colors" )} >

{ranking.rank} {showCrown ? (

{ranking.avatarUrl ? ( {`${displayName}

) : (

{(ranking.userName ?? ranking.userId) .charAt(0) .toUpperCase()}

)}

{displayName}

{ranking.byline ? (

{ranking.byline}

) : null}

{typeof ranking.rankChange === "number" && ranking.rankChange !== 0 ? (

0 ? "text-success-600" : "text-red-600" )} > {ranking.rankChange > 0 ? (

) : null}

{formatLeaderboardValue(ranking.value)}

) })}

{showPagination ? (

Show

Page {currentPage} of {totalPages}

) : null}

) } ) LeaderboardRankings.displayName = "LeaderboardRankings" export { LeaderboardRankings } export type { LeaderboardRankingItem, LeaderboardRankingsProps } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@catalogs","registryDependencies":["button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/trophy/ui/leaderboard-rankings.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]