// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Carousel 01 * @description A simple image carousel with navigation arrows and dot indicators. * Great for showcasing product images or portfolio work. * * @slots carousel, carousel-slides, carousel-slide, carousel-slide-image, * carousel-slide-caption, carousel-prev, carousel-next, carousel-dots, * carousel-dot * @variant image * * @registryDependencies button * @dependencies lucide-react */ import * as React from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" // ============================================================================ // TYPES // ============================================================================ interface CarouselSlide { /** Unique identifier */ id: string /** Slide image URL */ image: string /** Slide alt text */ alt: string /** Optional caption */ caption?: string } interface Carousel01Props { /** Carousel slides */ slides?: CarouselSlide[] /** Auto-play interval in ms (0 to disable) */ autoPlay?: number /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultSlides: CarouselSlide[] = [ { id: "slide-1", image: "/assets/placeholders/placeholder-16x9.svg", alt: "Product showcase 1", caption: "Introducing our latest feature", }, { id: "slide-2", image: "/assets/placeholders/placeholder-16x9.svg", alt: "Product showcase 2", caption: "Built for teams of all sizes", }, { id: "slide-3", image: "/assets/placeholders/placeholder-16x9.svg", alt: "Product showcase 3", caption: "Seamless integrations", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Carousel01({ slides = defaultSlides, autoPlay = 0, className, }: Carousel01Props) { const [currentIndex, setCurrentIndex] = React.useState(0) const goToNext = React.useCallback(() => { setCurrentIndex((prev) => (prev + 1) % slides.length) }, [slides.length]) const goToPrev = () => { setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length) } const goToSlide = (index: number) => { setCurrentIndex(index) } React.useEffect(() => { if (autoPlay <= 0) return const interval = setInterval(goToNext, autoPlay) return () => clearInterval(interval) }, [autoPlay, goToNext]) return (

{/* Slides Container */}

{slides.map((slide, index) => (

{slide.caption && (

{slide.caption}

)}

))}

{/* Navigation Arrows */} {/* Dot Indicators */}

{slides.map((slide, index) => (

) } export default Carousel01 export { Carousel01, type Carousel01Props, type CarouselSlide }