A ranked leaderboard display for Redis sorted sets with positions, scores, avatars, and gold/silver/bronze styling for the top three.
import { UpstashLeaderboard } from "@/components/ui/upstash-leaderboard";
const entries = [
{
id: "1",
name: "Sarah Chen",
score: 15420,
avatar: "https://i.pravatar.cc/64?img=1",
},
{
id: "2",
name: "Marcus Lee",
score: 14830,
avatar: "https://i.pravatar.cc/64?img=2",
},
{
id: "3",
name: "Priya Sharma",
score: 13990,
avatar: "https://i.pravatar.cc/64?img=3",
},
{ id: "4", name: "You", score: 12750, highlight: true },
{
id: "5",
name: "Diego Alvarez",
score: 11200,
avatar: "https://i.pravatar.cc/64?img=5",
},
{
id: "6",
name: "Emma Wilson",
score: 9840,
avatar: "https://i.pravatar.cc/64?img=6",
},
{
id: "7",
name: "Liam Novak",
score: 8710,
avatar: "https://i.pravatar.cc/64?img=7",
},
];
export default function UpstashLeaderboardDemo() {
return (
<div className="w-full max-w-md mx-auto p-4">
<UpstashLeaderboard
entries={entries}
title="Top Players"
scoreLabel="Points"
/>
</div>
);
}