// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Awards 01 * @description An awards and recognition showcase with icon badges. * Great for displaying industry awards, certifications, and achievements. * * @slots awards, awards-container, awards-header, awards-badge, * awards-heading, awards-description, awards-grid, awards-item, * awards-icon, awards-item-title, awards-item-organization, awards-item-year * @variant grid * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Award, Trophy, Medal, Star } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ type IconType = "award" | "trophy" | "medal" | "star" interface AwardItem { /** Unique identifier */ id: string /** Award title */ title: string /** Awarding organization */ organization: string /** Year received */ year: string /** Award icon type */ iconType?: IconType } interface Awards01Props { /** Section badge text */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Awards list */ awards?: AwardItem[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultAwards: AwardItem[] = [ { id: "award-1", title: "Best SaaS Product", organization: "SaaS Awards", year: "2024", iconType: "trophy", }, { id: "award-2", title: "Innovation Excellence", organization: "Tech Innovation Awards", year: "2024", iconType: "award", }, { id: "award-3", title: "Top 100 Companies", organization: "Inc. Magazine", year: "2023", iconType: "medal", }, { id: "award-4", title: "Customer Choice Award", organization: "G2 Crowd", year: "2024", iconType: "star", }, { id: "award-5", title: "Best Workplace", organization: "Great Place to Work", year: "2024", iconType: "award", }, { id: "award-6", title: "Design Excellence", organization: "Awwwards", year: "2023", iconType: "trophy", }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const iconMap = { award: Award, trophy: Trophy, medal: Medal, star: Star, } as const // ============================================================================ // COMPONENT // ============================================================================ function Awards01({ badge = "Recognition", heading = "Awards & achievements", description = "We're honored to be recognized by industry leaders for our commitment to excellence.", awards = defaultAwards, className, }: Awards01Props) { return (

{/* Header */}

{badge}

{heading}

{description && (

{description}

)}

{/* Awards Grid */}

{awards.map((award) => { const Icon = iconMap[award.iconType || "award"] return (

{award.title}

{award.organization}

{award.year}

) })}

) } export default Awards01 export { Awards01, type Awards01Props, type AwardItem, type IconType }