[V0_FILE]typescriptreact:file="components/image-carousel.tsx" "use client" import Image from "next/image" import { Card, CardContent } from "@/components/ui/card" import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel" const images = [ { src: "/placeholder.svg?height=400&width=600", alt: "Placeholder 1" }, { src: "/placeholder.svg?height=400&width=600", alt: "Placeholder 2" }, { src: "/placeholder.svg?height=400&width=600", alt: "Placeholder 3" }, { src: "/placeholder.svg?height=400&width=600", alt: "Placeholder 4" }, { src: "/placeholder.svg?height=400&width=600", alt: "Placeholder 5" }, ] export function ImageCarousel() { return ( {images.map((image, index) => ( {image.alt}

))} ) } [V0_FILE]typescriptreact:file="components/course-carousel.tsx" "use client" import { useEffect, useState } from "react" import type { CarouselApi } from "@/components/ui/carousel" import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel" const courses = [ { title: "Mathematics", gradient: "from-blue-400 to-blue-600", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-lj4nqqZtt8n52aTZczFRHVNvwfKtQc.png", }, { title: "Problem Solving", gradient: "from-purple-400 to-purple-600", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-lj4nqqZtt8n52aTZczFRHVNvwfKtQc.png", }, { title: "Breaking News", gradient: "from-red-400 to-red-600", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-lj4nqqZtt8n52aTZczFRHVNvwfKtQc.png", }, { title: "Language Arts", gradient: "from-green-400 to-green-600", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-lj4nqqZtt8n52aTZczFRHVNvwfKtQc.png", }, { title: "Physical Education", gradient: "from-indigo-400 to-indigo-600", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-lj4nqqZtt8n52aTZczFRHVNvwfKtQc.png", }, { title: "Science", gradient: "from-cyan-400 to-cyan-600", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-lj4nqqZtt8n52aTZczFRHVNvwfKtQc.png", }, { title: "History", gradient: "from-amber-400 to-amber-600", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-lj4nqqZtt8n52aTZczFRHVNvwfKtQc.png", }, ] export function CourseCarousel() { const [api, setApi] = useState() const [current, setCurrent] = useState(0) const [count, setCount] = useState(0) const [canScrollPrev, setCanScrollPrev] = useState(false) const [canScrollNext, setCanScrollNext] = useState(true) useEffect(() => { if (!api) { return } setCount(api.scrollSnapList().length) setCurrent(api.selectedScrollSnap()) api.on("select", () => { setCurrent(api.selectedScrollSnap()) setCanScrollPrev(api.canScrollPrev()) setCanScrollNext(api.canScrollNext()) }) }, [api]) return (

{courses.map((course, index) => (

{course.title}

))} {canScrollPrev && } {canScrollNext && } {/* Optional: Add dots indicator */}

{Array.from({ length: Math.ceil(count / 5) }).map((_, index) => (

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { CourseCarousel } from "@/components/course-carousel" export default function Home() { return (

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This