"use client" /** * @name Awards 04 * @description Leaderboard-style awards display with rankings, points, * and gamification elements for team or individual recognition. * * @slots awards, awards-container, awards-header, awards-badge, awards-heading, * awards-description, awards-content, awards-podium, awards-podium-item, * awards-podium-rank, awards-podium-avatar, awards-podium-name, * awards-podium-points, awards-list, awards-list-item, * awards-list-rank, awards-list-avatar, awards-list-info, * awards-list-name, awards-list-stats, awards-list-points * @variant leaderboard * * @registryDependencies badge avatar card * @dependencies lucide-react */ import * as React from "react" import { Trophy, Medal, Crown, Flame } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar" import { Card, CardContent } from "@/registry/ui/card" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface LeaderboardEntry { id: string name: string avatar?: string points: number streak?: number badges?: number } interface Awards04Props { badge?: string heading?: string description?: string entries?: LeaderboardEntry[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultEntries: LeaderboardEntry[] = [ { id: "entry-1", name: "Sarah Chen", points: 12500, streak: 15, badges: 8 }, { id: "entry-2", name: "Michael Ross", points: 11200, streak: 12, badges: 7 }, { id: "entry-3", name: "Emily Watson", points: 10800, streak: 8, badges: 6 }, { id: "entry-4", name: "James Wilson", points: 9500, streak: 5, badges: 5 }, { id: "entry-5", name: "Lisa Park", points: 8900, streak: 10, badges: 4 }, { id: "entry-6", name: "David Lee", points: 8200, streak: 3, badges: 4 }, { id: "entry-7", name: "Amy Liu", points: 7500, streak: 7, badges: 3 }, ] // ============================================================================ // COMPONENT // ============================================================================ function Awards04({ badge = "Leaderboard", heading = "Top Performers", description = "Celebrating our team members who go above and beyond.", entries = defaultEntries, className, idBase = "awards-04", }: Awards04Props) { const headingId = `${idBase}-heading` const topThree = entries.slice(0, 3) const rest = entries.slice(3) const getInitials = (name: string) => { return name.split(" ").map((n) => n[0]).join("") } return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Podium - Top 3 */}

{/* 2nd Place */} {topThree[1] && (

{getInitials(topThree[1].name)}

{topThree[1].name}

{topThree[1].points.toLocaleString()} pts

)} {/* 1st Place */} {topThree[0] && (

{getInitials(topThree[0].name)}

{topThree[0].name}

{topThree[0].points.toLocaleString()} pts

)} {/* 3rd Place */} {topThree[2] && (

{getInitials(topThree[2].name)}

{topThree[2].name}

{topThree[2].points.toLocaleString()} pts

)}

{/* Rest of Leaderboard */} {rest.length > 0 && ( {rest.map((entry, idx) => (

{idx + 4} {getInitials(entry.name)}

{entry.name}

{entry.streak && ( )} {entry.badges && ( )}

{entry.points.toLocaleString()} pts

))} )}

) } export default Awards04 export { Awards04, type Awards04Props }