Item Carousel

1"use client";
2 
3import { useRef, useState, useEffect, useCallback } from "react";
4import { cn, Button, Card, ChevronLeft, ChevronRight } from "./_adapter";
5import { ItemCard } from "./item-card";
6import { prefersReducedMotion } from "../shared/utils";
7import type { ItemCarouselProps } from "./schema";
8 
9const SCROLL_PADDING_STYLE = { scrollPaddingInline: "1rem" };
10 
11const SCROLL_EDGE_THRESHOLD_PX = 8;
12const SNAP_EPSILON_PX = 5;
13const SCROLL_ANIMATION_DURATION_MS = 300;
14const PAGE_SCROLL_RATIO = 0.8;
15const PAGE_SCROLL_BREAKPOINT_PX = 640;
16 
17type ScrollDirection = "left" | "right";
18 
19interface ScrollAnimationState {
20  target: number;
21  start: number;
22  startTime: number;
23  duration: number;
24  onComplete?: () => void;
25}
26 
27function useSmoothScroll() {
28  const animationRef = useRef<ScrollAnimationState | null>(null);
29  const frameRef = useRef<number | null>(null);
30 
31  const cancelAnimation = useCallback(() => {
32    if (frameRef.current !== null) {
33      cancelAnimationFrame(frameRef.current);
34      frameRef.current = null;
35    }
36    animationRef.current = null;
37  }, []);
38 
39  useEffect(() => cancelAnimation, [cancelAnimation]);
40 
41  const scrollTo = useCallback(
42    (
43      element: HTMLElement,
44      target: number,
45      duration = SCROLL_ANIMATION_DURATION_MS,
46      onComplete?: () => void,
47    ) => {
48      if (prefersReducedMotion() || duration <= 0) {
49        element.scrollLeft = target;
50        onComplete?.();
51        return;
52      }
53 
54      cancelAnimation();
55 
56      animationRef.current = {
57        target,
58        start: element.scrollLeft,
59        startTime: performance.now(),
60        duration,
61        onComplete,
62      };
63 
64      element.style.scrollSnapType = "none";
65 
66      const step = () => {
67        const anim = animationRef.current;
68        if (!anim) return;
69 
70        const elapsed = performance.now() - anim.startTime;
71        const progress = Math.min(elapsed / anim.duration, 1);
72        const eased = 1 - Math.pow(1 - progress, 3);
73 
74        element.scrollLeft = anim.start + (anim.target - anim.start) * eased;
75 
76        if (progress < 1) {
77          frameRef.current = requestAnimationFrame(step);
78          return;
79        }
80 
81        element.scrollLeft = anim.target;
82        const callback = anim.onComplete;
83        cancelAnimation();
84 
85        requestAnimationFrame(() => {
86          element.style.scrollSnapType = "";
87          callback?.();
88        });
89      };
90 
91      frameRef.current = requestAnimationFrame(step);
92    },
93    [cancelAnimation],
94  );
95 
96// … truncated