"use client" /** * @name Awards 05 * @description A carousel/slider awards display with smooth transitions. * Great for showcasing multiple awards in limited space with navigation. * * @slots awards, awards-container, awards-header, awards-badge, awards-heading, * awards-description, awards-carousel, awards-viewport, awards-slide, * awards-slide-icon, awards-slide-title, awards-slide-organization, * awards-slide-year, awards-slide-description, awards-nav, * awards-nav-prev, awards-nav-next, awards-dots, awards-dot * @variant carousel * * @registryDependencies badge button * @dependencies lucide-react */ import * as React from "react" import { Trophy, ChevronLeft, ChevronRight, Medal, Star } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface AwardItem { id: string title: string organization: string year: string description?: string iconType?: "trophy" | "medal" | "star" } interface Awards05Props { badge?: string heading?: string description?: string awards?: AwardItem[] autoPlayInterval?: number className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultAwards: AwardItem[] = [ { id: "award-1", title: "Best SaaS Product of the Year", organization: "TechCrunch Disrupt", year: "2024", description: "Recognized for innovation and impact in the B2B software industry.", iconType: "trophy", }, { id: "award-2", title: "Customer Excellence Award", organization: "G2 Crowd", year: "2024", description: "Voted #1 by customers for outstanding user experience and support.", iconType: "star", }, { id: "award-3", title: "Top 50 Fastest Growing", organization: "Forbes", year: "2023", description: "Named among the fastest-growing technology companies globally.", iconType: "medal", }, { id: "award-4", title: "Design Innovation Award", organization: "Awwwards", year: "2023", description: "Awarded for exceptional UI/UX design and visual excellence.", iconType: "trophy", }, { id: "award-5", title: "Best Workplace Culture", organization: "Great Place to Work", year: "2024", description: "Certified for outstanding employee satisfaction and culture.", iconType: "star", }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const iconMap = { trophy: Trophy, medal: Medal, star: Star, } // ============================================================================ // COMPONENT // ============================================================================ function Awards05({ badge = "Recognition", heading = "Award-winning excellence", description = "Our commitment to innovation has been recognized by industry leaders worldwide.", awards = defaultAwards, autoPlayInterval = 5000, className, idBase = "awards-05", }: Awards05Props) { const headingId = `${idBase}-heading` const [currentIndex, setCurrentIndex] = React.useState(0) const goToPrevious = React.useCallback(() => { setCurrentIndex((prev) => (prev === 0 ? awards.length - 1 : prev - 1)) }, [awards.length]) const goToNext = React.useCallback(() => { setCurrentIndex((prev) => (prev === awards.length - 1 ? 0 : prev + 1)) }, [awards.length]) const goToSlide = React.useCallback((index: number) => { setCurrentIndex(index) }, []) // Auto-play React.useEffect(() => { if (autoPlayInterval <= 0) return const interval = setInterval(goToNext, autoPlayInterval) return () => clearInterval(interval) }, [autoPlayInterval, goToNext]) return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Carousel */}

{/* Viewport */}

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

{award.title}

{award.organization}

{award.year} {award.description && (

{award.description}

)}

) })}

{/* Navigation Buttons */}

{/* Dots */}

{awards.map((award, index) => (

) } export default Awards05 export { Awards05, type Awards05Props }