Image Comparison

1'use client';
2import { cn } from '@/lib/utils';
3import { useState, createContext, useContext } from 'react';
4import {
5  motion,
6  MotionValue,
7  SpringOptions,
8  useMotionValue,
9  useSpring,
10  useTransform,
11} from 'motion/react';
12 
13const ImageComparisonContext = createContext<
14  | {
15      sliderPosition: number;
16      setSliderPosition: (pos: number) => void;
17      motionSliderPosition: MotionValue<number>;
18    }
19  | undefined
20>(undefined);
21 
22export type ImageComparisonProps = {
23  children: React.ReactNode;
24  className?: string;
25  enableHover?: boolean;
26  springOptions?: SpringOptions;
27};
28 
29const DEFAULT_SPRING_OPTIONS = {
30  bounce: 0,
31  duration: 0,
32};
33 
34function ImageComparison({
35  children,
36  className,
37  enableHover,
38  springOptions,
39}: ImageComparisonProps) {
40  const [isDragging, setIsDragging] = useState(false);
41  const motionValue = useMotionValue(50);
42  const motionSliderPosition = useSpring(
43    motionValue,
44    springOptions ?? DEFAULT_SPRING_OPTIONS
45  );
46  const [sliderPosition, setSliderPosition] = useState(50);
47 
48  const handleDrag = (event: React.MouseEvent | React.TouchEvent) => {
49    if (!isDragging && !enableHover) return;
50 
51    const containerRect = (
52      event.currentTarget as HTMLElement
53    ).getBoundingClientRect();
54    const x =
55      'touches' in event
56        ? event.touches[0].clientX - containerRect.left
57        : (event as React.MouseEvent).clientX - containerRect.left;
58 
59    const percentage = Math.min(
60      Math.max((x / containerRect.width) * 100, 0),
61      100
62    );
63    motionValue.set(percentage);
64    setSliderPosition(percentage);
65  };
66 
67  return (
68    <ImageComparisonContext.Provider
69      value={{ sliderPosition, setSliderPosition, motionSliderPosition }}
70    >
71      <div
72        className={cn(
73          'relative select-none overflow-hidden',
74          enableHover && 'cursor-ew-resize',
75          className
76        )}
77        onMouseMove={handleDrag}
78        onMouseDown={() => !enableHover && setIsDragging(true)}
79        onMouseUp={() => !enableHover && setIsDragging(false)}
80        onMouseLeave={() => !enableHover && setIsDragging(false)}
81        onTouchMove={handleDrag}
82        onTouchStart={() => !enableHover && setIsDragging(true)}
83        onTouchEnd={() => !enableHover && setIsDragging(false)}
84      >
85        {children}
86      </div>
87    </ImageComparisonContext.Provider>
88  );
89}
90 
91const ImageComparisonImage = ({
92  className,
93  alt,
94  src,
95  position,
96}: {
97  className?: string;
98  alt: string;
99  src: string;
100// … truncated