"use client"; import { useState, useEffect } from "react"; import { ChevronLeft, ChevronRight, Info } from "lucide-react"; import { motion } from "framer-motion"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Button } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; export interface CarouselItem { name: string; description: string; [key: string]: unknown; } interface ContentCarouselProps { items: CarouselItem[]; className?: string; onItemChange?: (item: CarouselItem, index: number) => void; } export const ContentCarousel = ({ items, className = "", onItemChange, }: ContentCarouselProps) => { const [currentIndex, setCurrentIndex] = useState(0); useEffect(() => { if (items.length === 0) return; const clampedIndex = Math.min(Math.max(currentIndex, 0), items.length - 1); if (clampedIndex !== currentIndex) setCurrentIndex(clampedIndex); }, [items.length]); const handleIndexChange = (newIndex: number) => { const validIndex = Math.min(Math.max(newIndex, 0), items.length - 1); setCurrentIndex(validIndex); onItemChange?.(items[validIndex], validIndex); }; const handleSelectChange = (value: string) => { const index = items.findIndex((item) => item.name === value); if (index !== -1) handleIndexChange(index); }; if (items.length === 0) return null; return (

{items[currentIndex].name} {items[currentIndex].description}

{items[currentIndex].description}

); };

Full-width Image Carousel

Aurora

Install Dependencies