"use client"; import * as React from "react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Minus, Trophy } from "lucide-react"; import {Badge} from "@/components/ui/badge"; export type LeaderboardEntry = { id: string; name: string; avatar?: string; score: number; rank: number; rankColor?: string; rankNode?: React.ReactNode; isCurrentUser?: boolean; className?: string; trend?: number; trendClassName?: string; }; export interface LeaderboardProps extends React.ComponentProps { title?: string; description?: string; entries: LeaderboardEntry[]; limit?: number; pageSize?: number; paginate?: boolean; } export function Leaderboard({ title = "Leaderboard", description, entries, limit, pageSize = 5, paginate = false, className, ...props }: LeaderboardProps) { const [currentPage, setCurrentPage] = React.useState(1); const totalEntries = limit ? entries.slice(0, limit) : entries; const totalPages = Math.ceil(totalEntries.length / pageSize); const displayEntries = paginate ? totalEntries.slice((currentPage - 1) * pageSize, currentPage * pageSize) : totalEntries.slice(0, limit || 5); const getInitials = (name: string) => { return name .split(" ") .map((n) => n[0]) .join("") .toUpperCase(); }; const defaultRankColors: Record = { 1: "text-yellow-500", 2: "text-gray-400", 3: "text-amber-600", }; return ( {title} {description && {description}}

{displayEntries.map((entry) => (

{entry.rankNode || (entry.rank <= 3 ? ( ) : ( entry.rank ))}

{getInitials(entry.name)}

{entry.name} {entry.isCurrentUser && ( (You) )}

{entry.trend !== undefined && ( {entry.trend > 0 && ( )} {entry.trend < 0 && ( )} {entry.trend === 0 && ( )} {entry.trend !== 0 && ( 0 && "text-emerald-600 dark:text-emerald-400", entry.trend < 0 && "text-red-600 dark:text-red-400" )} > {Math.abs(entry.trend)} )} )}

{entry.score.toLocaleString()}

))}

{paginate && totalPages > 1 && (

Page {currentPage} of {totalPages}

)} ); } export default Leaderboard;