// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Awards 03 * @description An awards timeline showing achievements chronologically. * Features year grouping, award details, and alternating layout. * * @slots awards, awards-container, awards-header, awards-header-badge, * awards-heading, awards-description, awards-timeline, awards-line, * awards-year-group, awards-year-marker, awards-year-label, * awards-item, awards-item-dot, awards-item-card, awards-item-icon, * awards-item-title, awards-item-organization, awards-item-description, * awards-item-category * @variant timeline * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Trophy, Award, Star, Medal } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface AwardItem { /** Unique identifier */ id: string /** Award title */ title: string /** Awarding organization */ organization: string /** Award year */ year: string /** Award description */ description?: string /** Award category */ category?: string } interface Awards03Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Awards grouped by year */ awards?: AwardItem[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultAwards: AwardItem[] = [ { id: "award-1", title: "Best SaaS Product", organization: "TechCrunch Disrupt", year: "2024", description: "Recognized for innovation in B2B software solutions.", category: "Innovation", }, { id: "award-2", title: "Top 50 Startups", organization: "Forbes", year: "2024", description: "Named among the fastest-growing startups globally.", category: "Growth", }, { id: "award-3", title: "Best User Experience", organization: "UX Design Awards", year: "2023", description: "Awarded for exceptional user interface design.", category: "Design", }, { id: "award-4", title: "Customer Choice Award", organization: "G2 Crowd", year: "2023", description: "Voted #1 by customers in our category.", category: "Customer Satisfaction", }, { id: "award-5", title: "Innovation Award", organization: "Product Hunt", year: "2022", description: "Featured as Product of the Year finalist.", category: "Innovation", }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const awardIcons = [Trophy, Award, Star, Medal] as const // ============================================================================ // COMPONENT // ============================================================================ function Awards03({ heading = "Awards & Recognition", description = "We're honored to be recognized by industry leaders for our innovation and impact.", awards = defaultAwards, className, }: Awards03Props) { // Group awards by year const groupedAwards = React.useMemo(() => { const groups: Record = {} awards.forEach((award) => { if (!groups[award.year]) { groups[award.year] = [] } groups[award.year].push(award) }) return Object.entries(groups).sort(([a], [b]) => Number(b) - Number(a)) }, [awards]) return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Timeline */}

{/* Center Line */}

{/* Year Groups */} {groupedAwards.map(([year, yearAwards], groupIndex) => (

{/* Year Marker */}

{year}

{/* Awards */}

{yearAwards.map((award, index) => { const IconComponent = awardIcons[(groupIndex + index) % awardIcons.length] const isEven = index % 2 === 0 return (

{/* Connector Dot */}

{/* Card */}

{award.title}

{award.organization}

{award.description && (

{award.description}

)} {award.category && ( {award.category} )}

) })}

))}

) } export default Awards03 export { Awards03, type Awards03Props, type AwardItem }