Apple Cards Carousel

1"use client";
2import React, {
3  useEffect,
4  useRef,
5  useState,
6  createContext,
7  useContext,
8} from "react";
9import {
10  IconArrowNarrowLeft,
11  IconArrowNarrowRight,
12  IconX,
13} from "@tabler/icons-react";
14import { cn } from "@/lib/utils";
15import { AnimatePresence, motion } from "motion/react";
16import Image, { ImageProps } from "next/image";
17import { useOutsideClick } from "@/hooks/use-outside-click";
18 
19interface CarouselProps {
20  items: JSX.Element[];
21  initialScroll?: number;
22}
23 
24type Card = {
25  src: string;
26  title: string;
27  category: string;
28  content: React.ReactNode;
29};
30 
31export const CarouselContext = createContext<{
32  onCardClose: (index: number) => void;
33  currentIndex: number;
34}>({
35  onCardClose: () => {},
36  currentIndex: 0,
37});
38 
39export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => {
40  const carouselRef = React.useRef<HTMLDivElement>(null);
41  const [canScrollLeft, setCanScrollLeft] = React.useState(false);
42  const [canScrollRight, setCanScrollRight] = React.useState(true);
43  const [currentIndex, setCurrentIndex] = useState(0);
44 
45  useEffect(() => {
46    if (carouselRef.current) {
47      carouselRef.current.scrollLeft = initialScroll;
48      checkScrollability();
49    }
50  }, [initialScroll]);
51 
52  const checkScrollability = () => {
53    if (carouselRef.current) {
54      const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current;
55      setCanScrollLeft(scrollLeft > 0);
56      setCanScrollRight(scrollLeft < scrollWidth - clientWidth);
57    }
58  };
59 
60  const scrollLeft = () => {
61    if (carouselRef.current) {
62      carouselRef.current.scrollBy({ left: -300, behavior: "smooth" });
63    }
64  };
65 
66  const scrollRight = () => {
67    if (carouselRef.current) {
68      carouselRef.current.scrollBy({ left: 300, behavior: "smooth" });
69    }
70  };
71 
72  const handleCardClose = (index: number) => {
73    if (carouselRef.current) {
74      const cardWidth = isMobile() ? 230 : 384; // (md:w-96)
75      const gap = isMobile() ? 4 : 8;
76      const scrollPosition = (cardWidth + gap) * (index + 1);
77      carouselRef.current.scrollTo({
78        left: scrollPosition,
79        behavior: "smooth",
80      });
81      setCurrentIndex(index);
82    }
83  };
84 
85  const isMobile = () => {
86    return window && window.innerWidth < 768;
87  };
88 
89  return (
90    <CarouselContext.Provider
91      value={{ onCardClose: handleCardClose, currentIndex }}
92    >
93      <div className="relative w-full">
94        <div
95// … truncated