Box Carousel Demo

1"use client"
2 
3import { useRef, useState  } from "react"
4import { Bug, BugOff } from "lucide-react"
5import BoxCarousel, { 
6  type BoxCarouselRef, 
7  type CarouselItem, 
8} from "@/components/fancy/carousel/box-carousel"
9import useScreenSize from "@/hooks/use-screen-size"
10 
11// Sample carousel items with mix of images and videos
12const carouselItems: CarouselItem[] = [
13  {
14    id: "1",
15    type: "image",
16    src: "https://cdn.cosmos.so/778d0640-d4b8-45b4-8bbe-862e759c231d?format=jpeg",
17    alt: "Blurry poster"
18  },
19  {
20    id: "2", 
21    type: "image",
22    src: "https://cdn.cosmos.so/27ac2696-1f2b-498e-8d3d-11f2dd358ab9?format=jpeg",
23    alt: "Abstract blurry figure"
24  },
25  {
26    id: "3",
27    type: "image", 
28    src: "https://cdn.cosmos.so/c48b739d-202d-4340-ab6b-afa34f0d7142?format=jpeg",
29    alt: "Long exposure photo of a person"
30  },
31  {
32    id: "4",
33    type: "image",
34    src: "https://cdn.cosmos.so/5332f9ac-7823-4635-871d-d4b3032e1c62?format=jpeg", 
35    alt: "Blurry portrait photo of a person"
36  },
37  {
38    id: "5",
39    type: "image",
40    src: "https://cdn.cosmos.so/d9ed937e-7c3b-4f64-a4f3-708d639f13a1?format=jpeg",
41    alt: "Long exposure shots with multiple people"
42  },
43  {
44    id: "6",
45    type: "image",
46    src: "https://cdn.cosmos.so/33b43e2a-da66-42d9-a0b1-08165d80b0aa?format=jpeg",
47    alt: "Close up blurry photo of a person poster"
48  },
49  {
50    id: "7",
51    type: "image",
52    src: "https://cdn.cosmos.so/40342df7-2ea2-4297-add2-fe17cdc62551?format=jpeg",
53    alt: "Long exposure shot of a motorcyclist"
54  },
55]
56 
57export default function BoxCarouselDemo() {
58  const carouselRef = useRef<BoxCarouselRef>(null)
59  const [debug, setDebug] = useState(false)
60  const screenSize = useScreenSize()
61 
62  // Responsive dimensions based on screen size
63  const getCarouselDimensions = () => {
64    if (screenSize.lessThan("md")) {
65      return { width: 200, height: 150 }
66    }
67    return { width: 350, height: 250 }
68  }
69 
70  const { width, height } = getCarouselDimensions()
71 
72  const handleNext = () => {
73    carouselRef.current?.next()
74  }
75 
76  const handlePrev = () => {
77    carouselRef.current?.prev()
78  }
79 
80  const handleIndexChange = (index: number) => {
81    console.log('Index changed:', index)
82  }
83 
84  const toggleDebug = () => {
85    setDebug(!debug)
86  }
87 
88  return (
89    <div className="w-full max-w-4xl h-full p-6 flex justify-items-center justify-center items-center text-muted-foreground bg-[#fefefe]">
90      <button
91        onClick={toggleDebug}
92// … truncated