diagonal-carousel

1"use client";
2 
3import * as React from "react";
4import { motion, type Transition } from "framer-motion";
5import { ChevronLeft, ChevronRight } from "lucide-react";
6import { cn } from "@/lib/utils";
7 
8export interface DiagonalCarouselItem {
9  src: string;
10  title: string;
11  alt?: string;
12}
13 
14export interface DiagonalCarouselProps
15  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
16  items: DiagonalCarouselItem[];
17  activeIndex?: number;
18  defaultActiveIndex?: number;
19  onActiveIndexChange?: (index: number) => void;
20  loop?: boolean;
21  slideSize?: number;
22  rotationStep?: number;
23  verticalStep?: number;
24  inactiveScale?: number;
25  transition?: Transition;
26  showControls?: boolean;
27  showDots?: boolean;
28  viewportClassName?: string;
29  slideClassName?: string;
30  imageClassName?: string;
31  labelClassName?: string;
32  controlsClassName?: string;
33}
34 
35const DEFAULT_TRANSITION: Transition = {
36  type: "spring",
37  bounce: 0.16,
38  duration: 0.85,
39};
40 
41const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
42 
43export function DiagonalCarousel({
44  items,
45  activeIndex,
46  defaultActiveIndex = 0,
47  onActiveIndexChange,
48  loop = false,
49  slideSize = 260,
50  rotationStep = 30,
51  verticalStep = 120,
52  inactiveScale = 0.6,
53  transition = DEFAULT_TRANSITION,
54  showControls = true,
55  showDots = true,
56  viewportClassName,
57  slideClassName,
58  imageClassName,
59  labelClassName,
60  controlsClassName,
61  className,
62  onKeyDown,
63  tabIndex,
64  ...props
65}: DiagonalCarouselProps) {
66  const maxIndex = Math.max(0, items.length - 1);
67  const [uncontrolledIndex, setUncontrolledIndex] = React.useState(() =>
68    clamp(defaultActiveIndex, 0, maxIndex)
69  );
70  const currentIndex = clamp(activeIndex ?? uncontrolledIndex, 0, maxIndex);
71  const safeSlideSize = Math.max(120, slideSize);
72  const safeInactiveScale = clamp(inactiveScale, 0.35, 1);
73 
74  const selectSlide = React.useCallback(
75    (nextIndex: number) => {
76      if (!items.length) {
77        return;
78      }
79 
80      const resolvedIndex = loop
81        ? (nextIndex + items.length) % items.length
82        : clamp(nextIndex, 0, maxIndex);
83 
84      if (activeIndex === undefined) {
85        setUncontrolledIndex(resolvedIndex);
86      }
87 
88      onActiveIndexChange?.(resolvedIndex);
89    },
90    [activeIndex, items.length, loop, maxIndex, onActiveIndexChange]
91  );
92 
93  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
94    onKeyDown?.(event);
95 
96    if (event.defaultPrevented) {
97      return;
98    }
99 
100// … truncated