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://cdn.21st.dev/assets/mirror/23/23faad2cb3788de8dae9e7797c90a11e9cac697bcfc9ae118086800842579aea.jpg",
},
{
id: "2",
name: "Marcus Lee",
score: 14830,
avatar: "https://cdn.21st.dev/assets/mirror/22/223a928c2398a28ed696d9ed7c4b9fb2e9f19955f04b982b13cd85aae1a1f253.jpg",
},
{
id: "3",
name: "Priya Sharma",
score: 13990,
avatar: "https://cdn.21st.dev/assets/mirror/50/50fb308e9a8ddec88673fbf286a7174ce7e139dd1041fcb39792ae27cc15f23e.jpg",
},
{ id: "4", name: "You", score: 12750, highlight: true },
{
id: "5",
name: "Diego Alvarez",
score: 11200,
avatar: "https://cdn.21st.dev/assets/mirror/b3/b36ca9959c3ac97d0eb9be717a26d714fb6133f1c9fa07b1cef6118ecc97e40e.jpg",
},
{
id: "6",
name: "Emma Wilson",
score: 9840,
avatar: "https://cdn.21st.dev/assets/mirror/5b/5bccf09544cbce4397a885db3234b99b3dc220a70dbb1b921058706aa056a371.jpg",
},
{
id: "7",
name: "Liam Novak",
score: 8710,
avatar: "https://cdn.21st.dev/assets/mirror/8c/8c2c5f479e1fa0790617b0ce38797ecd39effea8740401ae4ad6d4a225f50879.jpg",
},
];
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>
);
}