Box Carousel Video Demo

1"use client"
2 
3import { useRef, useState } from "react"
4import { AnimatePresence, motion } from "motion/react"
5 
6import BoxCarousel, {
7  type BoxCarouselRef,
8  type CarouselItem,
9} from "@/components/fancy/carousel/box-carousel"
10import useScreenSize from "@/hooks/use-screen-size"
11 
12// Sample carousel items with mix of images and videos
13const carouselItems: CarouselItem[] = [
14  {
15    id: "1",
16    type: "video",
17    src: "https://cdn.cosmos.so/3fe9c8a8-b562-4090-a5ac-5bbdf655a938.mp4",
18    alt: "@portalsandpaths",
19  },
20  {
21    id: "2",
22    type: "video",
23    src: "https://cdn.cosmos.so/594e87df-e8ca-4d03-8137-f78b5dab6793.mp4",
24    alt: "@studio.size",
25  },
26  {
27    id: "3",
28    type: "image",
29    src: "https://cdn.cosmos.so/92162e2e-abf6-4b98-a557-bfe25a336608?format=jpeg",
30    alt: "@david_wise",
31  },
32  {
33    id: "4",
34    type: "video",
35    src: "https://cdn.cosmos.so/aae0a1e6-d03d-43ae-aa7f-21627a950730.mp4",
36    alt: "@svenvranjes",
37  },
38  {
39    id: "5",
40    type: "image",
41    src: "https://cdn.cosmos.so/7a5f1a73-ca73-466b-afaf-2b3d0639aa1a?format=jpeg",
42    alt: "@deconstructie",
43  },
44]
45 
46export default function BoxCarouselDemo() {
47  const carouselRef = useRef<BoxCarouselRef>(null)
48  const [currentIndex, setCurrentIndex] = useState(0)
49  const screenSize = useScreenSize()
50 
51  // Responsive dimensions based on screen size
52  const getCarouselDimensions = () => {
53    if (screenSize.lessThan("md")) {
54      return { width: 200, height: 150 }
55    }
56    return { width: 350, height: 250 }
57  }
58 
59  const { width, height } = getCarouselDimensions()
60 
61  const handleIndexChange = (index: number) => {
62    setCurrentIndex(index)
63  }
64 
65  return (
66    <div className="w-full max-w-4xl h-full p-6 flex justify-items-center justify-center items-center text-muted-foreground bg-[#fefefe]">
67 
68 
69      <div className="space-y-20">
70        <div className="flex justify-center">
71          <BoxCarousel
72            ref={carouselRef}
73            items={carouselItems}
74            width={width}
75            height={height}
76            direction="right"
77            onIndexChange={handleIndexChange}
78            enableDrag
79            perspective={1000}
80          />
81        </div>
82 
83        <div className="flex gap-2 justify-center w-full items-start">
84          <AnimatePresence mode="popLayout">
85            <motion.span
86              key={currentIndex}
87              layoutId="id"
88              layout
89              initial={{ opacity: 0, y: 0 }}
90              animate={{ opacity: 1, y: 0 }}
91// … truncated