Apple gallery

1"use client";
2 
3import React from "react";
4import {
5  type HTMLMotionProps,
6  motion,
7  useScroll,
8  useTransform,
9  useMotionValue,
10  animate,
11} from "motion/react";
12import { PlayIcon, PauseIcon } from "lucide-react";
13 
14import { Button } from "@/components/ui/button";
15import { cn } from "@/lib/utils";
16 
17const AppleGalleryContext = React.createContext<null | {
18  slideCount: number;
19  isPlaying: boolean;
20  setActiveSlideIndex: React.Dispatch<React.SetStateAction<number>>;
21  containerRef: React.RefObject<HTMLDivElement | null>;
22  activeSlideIndex: number;
23  targetSlideIndexRef: React.RefObject<null | number>;
24  progressAnimationRef: React.RefObject<ReturnType<typeof animate> | null>;
25  setIsPlaying: React.Dispatch<React.SetStateAction<boolean>>;
26  scrollToSlide: (childIndex: number) => void;
27  durationInSec: number;
28}>(null);
29 
30export function useAppleGallery() {
31  const ctx = React.useContext(AppleGalleryContext);
32  if (ctx === null) {
33    throw new Error("useAppleGallery must be used within an <AppleGallery />");
34  }
35  return ctx;
36}
37 
38export function AppleGallery({
39  children,
40  durationInSec = 4,
41  className,
42  ...props
43}: {
44  children: React.ReactNode;
45  durationInSec?: number;
46} & React.ComponentProps<"div">) {
47  const [slideCount] = React.useState(
48    (
49      (React.Children.toArray(children)[0] as React.ReactElement).props as {
50        children: React.ReactElement[];
51      }
52    ).children.length
53  );
54 
55  const [isPlaying, setIsPlaying] = React.useState(false);
56  const [activeSlideIndex, setActiveSlideIndex] = React.useState(0);
57 
58  const containerRef = React.useRef<HTMLDivElement | null>(null);
59  const progressAnimationRef = React.useRef<ReturnType<typeof animate> | null>(
60    null
61  );
62  const targetSlideIndexRef = React.useRef<null | number>(activeSlideIndex);
63 
64  const scrollToSlide = React.useCallback(
65    (childIndex: number) => {
66      if (containerRef.current) {
67        setIsPlaying(false);
68        setActiveSlideIndex(childIndex);
69        targetSlideIndexRef.current = childIndex;
70        progressAnimationRef.current = null;
71        containerRef.current.children[childIndex].scrollIntoView({
72          behavior: "smooth",
73          block: "nearest",
74        });
75      }
76    },
77    [targetSlideIndexRef, setIsPlaying]
78  );
79 
80  return (
81    <AppleGalleryContext.Provider
82      value={{
83        slideCount,
84        isPlaying,
85        activeSlideIndex,
86        progressAnimationRef,
87        setActiveSlideIndex,
88        containerRef,
89        scrollToSlide,
90// … truncated