"use client" /** * @name Carousel 06 * @description Thumbnail navigation carousel with preview strip. * Great for product galleries and image showcases. * * @slots carousel, carousel-container, carousel-main, carousel-main-slide, * carousel-main-image, carousel-thumbnails, carousel-thumbnail, * carousel-thumbnail-image, carousel-prev, carousel-next * @variant thumbnail-nav * * @registryDependencies button * @dependencies lucide-react */ import * as React from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/registry/ui/button" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface CarouselSlide { id: string alt: string } interface Carousel06Props { slides?: CarouselSlide[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultSlides: CarouselSlide[] = [ { id: "slide-1", alt: "Product view 1" }, { id: "slide-2", alt: "Product view 2" }, { id: "slide-3", alt: "Product view 3" }, { id: "slide-4", alt: "Product view 4" }, { id: "slide-5", alt: "Product view 5" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Carousel06({ slides = defaultSlides, className, idBase = "carousel-06", }: Carousel06Props) { const [currentIndex, setCurrentIndex] = React.useState(0) const goToSlide = (index: number) => { setCurrentIndex(index) } const goToNext = () => { setCurrentIndex((prev) => (prev + 1) % slides.length) } const goToPrev = () => { setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length) } return (

{/* Main Image */}

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