"use client" /** * @name Carousel 07 * @description Vertical scroll carousel with stacked cards. * Unique scrolling experience for testimonials or features. * * @slots carousel, carousel-container, carousel-header, carousel-heading, * carousel-description, carousel-viewport, carousel-track, carousel-card, * carousel-card-content, carousel-card-quote, carousel-card-author, * carousel-card-avatar, carousel-card-info, carousel-card-name, * carousel-card-role, carousel-indicators, carousel-indicator * @variant vertical * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Quote, User } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface TestimonialItem { id: string quote: string name: string role: string company: string } interface Carousel07Props { badge?: string heading?: string description?: string items?: TestimonialItem[] autoPlay?: number className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultItems: TestimonialItem[] = [ { id: "testimonial-1", quote: "This platform has completely transformed how we approach our daily workflows. The efficiency gains have been remarkable.", name: "Sarah Mitchell", role: "VP of Operations", company: "TechCorp Inc.", }, { id: "testimonial-2", quote: "The customer support team is incredible. They went above and beyond to help us with our unique integration requirements.", name: "David Chen", role: "CTO", company: "StartupXYZ", }, { id: "testimonial-3", quote: "We've seen a 40% increase in team productivity since implementing this solution. It's been a game-changer for our organization.", name: "Emily Rodriguez", role: "Director of Engineering", company: "Global Systems", }, { id: "testimonial-4", quote: "The analytics capabilities alone have provided insights that helped us make better strategic decisions.", name: "Michael Park", role: "Head of Product", company: "Innovate Labs", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Carousel07({ badge = "Testimonials", heading = "What our customers say", description = "Hear from the teams who have transformed their workflows with our platform.", items = defaultItems, autoPlay = 4000, className, idBase = "carousel-07", }: Carousel07Props) { const [currentIndex, setCurrentIndex] = React.useState(0) const headingId = `${idBase}-heading` const goToSlide = (index: number) => { setCurrentIndex(index) } React.useEffect(() => { if (autoPlay <= 0) return const interval = setInterval(() => { setCurrentIndex((prev) => (prev + 1) % items.length) }, autoPlay) return () => clearInterval(interval) }, [autoPlay, items.length]) return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Carousel */}

{items.map((item, index) => (

“{item.quote}”

{/* Author */}

{item.name}

{item.role}, {item.company}

))}

{/* Indicators */}

{items.map((item, index) => (

) } export default Carousel07 export { Carousel07, type Carousel07Props }