// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Carousel 03 * @description A full-width hero carousel with content overlays. * Features large images with text, navigation arrows, and progress indicators. * * @slots carousel, carousel-slide, carousel-slide-image, carousel-slide-overlay, * carousel-slide-content, carousel-slide-badge, carousel-slide-heading, * carousel-slide-description, carousel-slide-cta, carousel-prev, * carousel-next, carousel-dots, carousel-dot, carousel-progress * @variant hero * * @registryDependencies button-link button badge * @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" import { ButtonLink } from "@/registry/ui/button-link" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface CarouselSlide { /** Unique identifier */ id: string /** Slide image */ image: string /** Slide badge */ badge?: string /** Slide heading */ heading: string /** Slide description */ description: string /** CTA config */ cta?: CtaConfig } interface Carousel03Props { /** Carousel slides */ slides?: CarouselSlide[] /** Show progress bar */ showProgress?: boolean /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultSlides: CarouselSlide[] = [ { id: "slide-1", image: "/assets/placeholders/placeholder-3x1.svg", badge: "New Release", heading: "Introducing Our Latest Innovation", description: "Experience the future of productivity with our groundbreaking new features.", cta: { text: "Learn More", href: "#" }, }, { id: "slide-2", image: "/assets/placeholders/placeholder-3x1.svg", badge: "Featured", heading: "Transform Your Workflow", description: "Streamline your processes and boost efficiency with intelligent automation.", cta: { text: "Get Started", href: "#" }, }, { id: "slide-3", image: "/assets/placeholders/placeholder-3x1.svg", badge: "Limited Offer", heading: "Special Launch Pricing", description: "Get 50% off your first year when you sign up this month.", cta: { text: "Claim Offer", href: "#" }, }, ] // ============================================================================ // COMPONENT // ============================================================================ function Carousel03({ slides = defaultSlides, showProgress = true, className, }: Carousel03Props) { const [activeIndex, setActiveIndex] = React.useState(0) const goToPrevious = () => { setActiveIndex((prev) => (prev === 0 ? slides.length - 1 : prev - 1)) } const goToNext = () => { setActiveIndex((prev) => (prev === slides.length - 1 ? 0 : prev + 1)) } const activeSlide = slides[activeIndex] return (

{/* Slide */}

{/* Background Image */} {/* Overlay */}

{/* Content */}

{activeSlide?.badge && ( {activeSlide.badge} )}

{activeSlide?.heading}

{activeSlide?.description}

{activeSlide?.cta && ( {activeSlide.cta.text} )}

{/* Navigation Arrows */}

{/* Progress Indicators */}

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

{/* Progress Bar */} {showProgress && (

)}

) } export default Carousel03 export { Carousel03, type Carousel03Props, type CarouselSlide, type CtaConfig }