comparison

1"use client";
2 
3import { GripVerticalIcon } from "lucide-react";
4import {
5  type MotionValue,
6  motion,
7  useMotionValue,
8  useSpring,
9  useTransform,
10} from "motion/react";
11import {
12  type ComponentProps,
13  createContext,
14  type HTMLAttributes,
15  type MouseEventHandler,
16  type ReactNode,
17  type TouchEventHandler,
18  useContext,
19  useState,
20} from "react";
21import { cn } from "@/lib/utils";
22 
23type ImageComparisonContextType = {
24  sliderPosition: number;
25  setSliderPosition: (pos: number) => void;
26  motionSliderPosition: MotionValue<number>;
27  mode: "hover" | "drag";
28};
29 
30const ImageComparisonContext = createContext<
31  ImageComparisonContextType | undefined
32>(undefined);
33 
34const useImageComparisonContext = () => {
35  const context = useContext(ImageComparisonContext);
36 
37  if (!context) {
38    throw new Error(
39      "useImageComparisonContext must be used within a ImageComparison"
40    );
41  }
42 
43  return context;
44};
45 
46export type ComparisonProps = HTMLAttributes<HTMLDivElement> & {
47  mode?: "hover" | "drag";
48  onDragStart?: () => void;
49  onDragEnd?: () => void;
50};
51 
52export const Comparison = ({
53  className,
54  mode = "drag",
55  onDragStart,
56  onDragEnd,
57  ...props
58}: ComparisonProps) => {
59  const [isDragging, setIsDragging] = useState(false);
60  const motionValue = useMotionValue(50);
61  const motionSliderPosition = useSpring(motionValue, {
62    bounce: 0,
63    duration: 0,
64  });
65  const [sliderPosition, setSliderPosition] = useState(50);
66 
67  const handleDrag = (domRect: DOMRect, clientX: number) => {
68    if (!isDragging && mode === "drag") {
69      return;
70    }
71 
72    const x = clientX - domRect.left;
73    const percentage = Math.min(Math.max((x / domRect.width) * 100, 0), 100);
74    motionValue.set(percentage);
75    setSliderPosition(percentage);
76  };
77 
78  const handleMouseDrag: MouseEventHandler<HTMLDivElement> = (event) => {
79    if (!event) {
80      return;
81    }
82 
83    const containerRect = event.currentTarget.getBoundingClientRect();
84 
85    handleDrag(containerRect, event.clientX);
86  };
87 
88  const handleTouchDrag: TouchEventHandler<HTMLDivElement> = (event) => {
89    if (!event) {
90      return;
91    }
92 
93    const containerRect = event.currentTarget.getBoundingClientRect();
94    const touches = Array.from(event.touches);
95 
96    handleDrag(containerRect, touches.at(0)?.clientX ?? 0);
97  };
98 
99  const handleDragStart = () => {
100    if (mode === "drag") {
101      setIsDragging(true);
102      onDragStart?.();
103    }
104  };
105 
106  const handleDragEnd = () => {
107    if (mode === "drag") {
108// … truncated