"use client"; import * as React from "react"; import { motion } from "motion/react"; import { cn } from "@kineticui/core"; export type LeaderboardEntry = { id: string; name: string; score: number; avatar?: React.ReactNode; subtitle?: string; /** Places moved since last period (+ up, − down). */ change?: number; /** Highlight as the current user. */ isYou?: boolean; }; const medal = ["#F5C451", "#C8CDD3", "#D99A63"]; /** Ranked list with podium medals, movement arrows and animated re-ordering. */ export function Leaderboard({ entries, format = (n: number) => n.toLocaleString(), unit, className, }: { entries: LeaderboardEntry[]; format?: (n: number) => string; unit?: string; className?: string; }) { const sorted = [...entries].sort((a, b) => b.score - a.score); const top = sorted[0]?.score || 1; return (

{i + 1} {e.avatar ? {e.avatar} : null} {e.name} {e.isYou ? You : null} {e.subtitle ? {e.subtitle} : null} {e.change ? ( 0 ? "text-success" : "text-danger")}> {e.change > 0 ? "▲" : "▼"} {Math.abs(e.change)} ) : ( – )} {format(e.score)} {unit ? {unit} : null}

); }

Leaderboard

Installation

Exports