Image Comparison

1"use client";
2 
3import { cn } from "@/lib/utils";
4import {
5  useState,
6  createContext,
7  useContext,
8  useEffect,
9  ReactNode,
10  useRef,
11} from "react";
12import {
13  motion,
14  MotionValue,
15  useMotionValue,
16  useSpring,
17  useTransform,
18  AnimationOptions,
19} from "motion/react";
20 
21const SliderContext = createContext<
22  | {
23      position: number;
24      setPosition: (pos: number) => void;
25      motionPosition: MotionValue<number>;
26      orientation: "horizontal" | "vertical";
27      isDragging: boolean;
28      contentDimensions: { width: number; height: number } | null;
29    }
30  | undefined
31>(undefined);
32 
33export type ContrastSliderProps = {
34  children: React.ReactNode;
35  className?: string;
36  hoverControl?: boolean;
37  orientation?: "horizontal" | "vertical";
38  defaultPosition?: number;
39  animationConfig?: Partial<AnimationOptions>;
40  dividerColor?: string;
41  constrainToContent?: boolean;
42};
43 
44const DEFAULT_ANIMATION_CONFIG = {
45  damping: 15,
46  stiffness: 400,
47  mass: 0.4,
48};
49 
50function ImageSlider({
51  children,
52  className,
53  hoverControl = false,
54  orientation = "horizontal",
55  defaultPosition = 50,
56  animationConfig,
57  dividerColor,
58  constrainToContent = false,
59}: ContrastSliderProps) {
60  const [isActive, setIsActive] = useState(false);
61  const baseMotion = useMotionValue(defaultPosition);
62  const springMotion = useSpring(
63    baseMotion,
64    animationConfig ?? DEFAULT_ANIMATION_CONFIG,
65  );
66  const [position, setPosition] = useState(defaultPosition);
67  const [contentDimensions, setContentDimensions] = useState<{
68    width: number;
69    height: number;
70  } | null>(null);
71  const containerRef = useRef<HTMLDivElement>(null);
72 
73  const motionToUse = hoverControl ? baseMotion : springMotion;
74 
75  useEffect(() => {
76    baseMotion.set(defaultPosition);
77    setPosition(defaultPosition);
78  }, [defaultPosition, baseMotion]);
79 
80  useEffect(() => {
81    if (containerRef.current) {
82      const updateDimensions = () => {
83        const container = containerRef.current;
84        if (!container) return;
85 
86        const firstImg = container.querySelector("img");
87        if (!firstImg) return;
88 
89        if (firstImg.complete) {
90          calculateDimensions(firstImg);
91        } else {
92          firstImg.onload = () => calculateDimensions(firstImg);
93        }
94      };
95 
96      const calculateDimensions = (img: HTMLImageElement) => {
97        const container = containerRef.current;
98        if (!container) return;
99 
100        const { naturalWidth, naturalHeight } = img;
101// … truncated