"use client" /** * @name Carousel 04 * @description A multi-slide product carousel showing multiple items at once * with thumbnails and smooth transitions. * * @slots carousel, carousel-container, carousel-header, carousel-heading, * carousel-nav, carousel-prev, carousel-next, carousel-track, * carousel-slides, carousel-slide, carousel-card, carousel-image, * carousel-content, carousel-title, carousel-description, carousel-price, * carousel-indicators * @variant multi-slide * * @registryDependencies button card badge * @dependencies lucide-react */ import * as React from "react" import { ChevronLeft, ChevronRight, Star } from "lucide-react" import { Button } from "@/registry/ui/button" import { Card, CardContent } from "@/registry/ui/card" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface ProductSlide { id: string title: string description: string price: string originalPrice?: string rating: number badge?: string } interface Carousel04Props { heading?: string products?: ProductSlide[] visibleSlides?: number className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultProducts: ProductSlide[] = [ { id: "prod-1", title: "Wireless Headphones", description: "Premium sound quality", price: "$149.99", originalPrice: "$199.99", rating: 4.8, badge: "Sale", }, { id: "prod-2", title: "Smart Watch", description: "Track your fitness", price: "$299.99", rating: 4.6, }, { id: "prod-3", title: "Camera Lens", description: "Professional grade", price: "$899.99", rating: 4.9, badge: "New", }, { id: "prod-4", title: "Laptop Stand", description: "Ergonomic design", price: "$79.99", rating: 4.7, }, { id: "prod-5", title: "Mechanical Keyboard", description: "RGB backlit keys", price: "$149.99", rating: 4.5, }, { id: "prod-6", title: "USB-C Hub", description: "7-in-1 connectivity", price: "$59.99", rating: 4.4, }, ] // ============================================================================ // COMPONENT // ============================================================================ function Carousel04({ heading = "Featured Products", products = defaultProducts, visibleSlides = 4, className, idBase = "carousel-04", }: Carousel04Props) { const [currentIndex, setCurrentIndex] = React.useState(0) const [slidesPerView, setSlidesPerView] = React.useState(visibleSlides) const headingId = `${idBase}-heading` // Update slides per view based on screen size React.useEffect(() => { const updateSlidesPerView = () => { if (window.innerWidth < 640) { setSlidesPerView(2) } else if (window.innerWidth < 1024) { setSlidesPerView(3) } else { setSlidesPerView(visibleSlides) } } updateSlidesPerView() window.addEventListener("resize", updateSlidesPerView) return () => window.removeEventListener("resize", updateSlidesPerView) }, [visibleSlides]) const maxIndex = Math.max(0, products.length - slidesPerView) const goToNext = () => { setCurrentIndex((prev) => Math.min(prev + 1, maxIndex)) } const goToPrev = () => { setCurrentIndex((prev) => Math.max(prev - 1, 0)) } // Reset index if it exceeds maxIndex after resize React.useEffect(() => { if (currentIndex > maxIndex) { setCurrentIndex(maxIndex) } }, [maxIndex, currentIndex]) const canGoPrev = currentIndex > 0 const canGoNext = currentIndex < maxIndex return (

{/* Header */}

{heading}

{/* Carousel Track */}

{products.map((product) => (

{product.badge && ( {product.badge} )}

{product.title}

{product.description}

{product.price} {product.originalPrice && ( {product.originalPrice} )}

))}

{/* Progress Indicators */}

{Array.from({ length: maxIndex + 1 }).map((_, index) => (

) } export default Carousel04 export { Carousel04, type Carousel04Props }