// npm i embla-carousel-autoplay framer-motion lucide-react // npx shadcn@latest add carousel "use client" import React, { useCallback, useEffect, useMemo, useState } from "react" import Image from "next/image" import Autoplay from "embla-carousel-autoplay" import { ChevronRight } from "lucide-react" import { AnimatePresence, motion, useReducedMotion, type Variants, } from "motion/react" import { cn } from "@/lib/utils" import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi, } from "@/components/ui/carousel" interface Tip { text: string image: string url?: string } interface LoadingCarouselProps { tips?: Tip[] className?: string autoplayInterval?: number showNavigation?: boolean showIndicators?: boolean showProgress?: boolean aspectRatio?: "video" | "square" | "wide" textPosition?: "top" | "bottom" onTipChange?: (index: number) => void backgroundTips?: boolean backgroundGradient?: boolean shuffleTips?: boolean } const defaultTips: Tip[] = [ { text: "Backend snippets. Shadcn style headless components.. but for your backend.", image: "/placeholders/cult-snips.png", url: "https://www.newcult.co/backend", }, { text: "Create your first directory app today. AI batch scripts to process 100s of urls in seconds.", image: "/placeholders/cult-dir.png", url: "https://www.newcult.co/templates/cult-seo", }, { text: "Cult landing page template. Framer motion, shadcn, and tailwind.", image: "/placeholders/cult-rune.png", url: "https://www.newcult.co/templates/cult-landing-page", }, { text: "Vector embeddings, semantic search, and chat based vector retrieval on easy mode.", image: "/placeholders/cult-manifest.png", url: "https://www.newcult.co/templates/manifest", }, { text: "SEO analysis app. Scraping, analysis, insights, and AI recommendations.", image: "/placeholders/cult-seo.png", url: "https://www.newcult.co/templates/cult-seo", }, ] function shuffleArray(array: T[]): T[] { const shuffled = [...array] for (let i = shuffled.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)) ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]] } return shuffled } function getTipKey(tip: Tip): string { return `${tip.text}-${tip.image}` } const carouselVariants: Variants = { enter: (direction: number) => ({ x: direction > 0 ? "100%" : "-100%", opacity: 0, }), center: { x: 0, opacity: 1, }, exit: (direction: number) => ({ x: direction < 0 ? "100%" : "-100%", opacity: 0, }), } const textVariants: Variants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { delay: 0.3, duration: 0.5 } }, } const aspectRatioClasses = { video: "aspect-video", square: "aspect-square", wide: "aspect-[2/1]", } export function LoadingCarousel({ onTipChange, className, tips = defaultTips, showProgress = true, aspectRatio = "video", showNavigation = false, showIndicators = true, backgroundTips = false, textPosition = "bottom", autoplayInterval = 4500, backgroundGradient = false, shuffleTips = false, }: LoadingCarouselProps) { const [api, setApi] = useState() const [current, setCurrent] = useState(0) const [direction, setDirection] = useState(0) const prefersReducedMotion = useReducedMotion() const [displayTips] = useState(() => shuffleTips ? shuffleArray(tips) : tips ) const autoplay = useMemo( () => Autoplay({ delay: autoplayInterval, stopOnInteraction: false, }), [autoplayInterval] ) useEffect(() => { if (!api) { return } setCurrent(api.selectedScrollSnap()) setDirection( api.scrollSnapList().indexOf(api.selectedScrollSnap()) - current ) const onSelect = () => { const newIndex = api.selectedScrollSnap() setCurrent(newIndex) setDirection(api.scrollSnapList().indexOf(newIndex) - current) onTipChange?.(newIndex) } api.on("select", onSelect) return () => { api.off("select", onSelect) } }, [api, current, onTipChange]) const handleSelect = useCallback( (index: number) => { api?.scrollTo(index) }, [api] ) return (

{(displayTips || []).map((tip) => ( {`Visual

{backgroundGradient && (

)} {backgroundTips ? ( {displayTips[current]?.url ? (

{tip.text}

) : (

{tip.text}

)} ) : null} ))} {showNavigation && ( <> )}

{showIndicators && (

{(displayTips || []).map((tip, index) => { const isActive = index === current const isComplete = index < current return ( ) })}

)}

{backgroundTips ? ( Tip {current + 1}/{displayTips?.length || 0} ) : (

{displayTips[current]?.url ? ( {displayTips[current]?.text} ) : ( {displayTips[current]?.text} )}

)} {backgroundTips && (

) } export default LoadingCarousel

Loading Carousel

Instalação

Dependências

Registry dependencies