"use client"; import { Trophy } from "lucide-react"; import { cn } from "@/lib/utils"; type Tone = | "primary" | "foreground" | "gold" | "violet" | "emerald" | "ocean"; interface Stats9Props { rank?: number; total?: number; label?: string; percentile?: string; tone?: Tone; className?: string; } const toneClasses: Record = { primary: "bg-primary text-primary-foreground", foreground: "bg-foreground text-background", gold: "bg-gradient-to-br from-amber-400 to-orange-500 text-white", violet: "bg-gradient-to-br from-violet-500 to-fuchsia-500 text-white", emerald: "bg-gradient-to-br from-emerald-400 to-teal-500 text-white", ocean: "bg-gradient-to-br from-sky-500 to-indigo-600 text-white", }; export const stats9Demo: Stats9Props = { rank: 12, total: 500, label: "Weekly leaderboard", percentile: "Top 3%", tone: "primary", }; export function Stats9({ rank = 1, total = 1, label, percentile, tone = "primary", className, }: Stats9Props) { return (

#{rank} of {total.toLocaleString()}

{label && ( {label} )} {label && percentile && (

); }