image-comparison

1import { GripHorizontal, GripVertical } from "lucide-react";
2import { motion, useMotionValue, useTransform } from "motion/react";
3import type React from "react";
4import { useCallback, useEffect, useRef, useState } from "react";
5import { cn } from "@/lib/utils";
6 
7// Basic Comparison Slider
8interface ImageComparisonProps {
9  beforeImage: string;
10  afterImage: string;
11  beforeLabel?: string;
12  afterLabel?: string;
13  className?: string;
14  initialPosition?: number;
15  orientation?: "horizontal" | "vertical";
16  showLabels?: boolean;
17  sliderColor?: string;
18}
19 
20export function ImageComparison({
21  beforeImage,
22  afterImage,
23  beforeLabel = "Before",
24  afterLabel = "After",
25  className,
26  initialPosition = 50,
27  orientation = "horizontal",
28  showLabels = true,
29  sliderColor = "hsl(var(--background))",
30}: ImageComparisonProps) {
31  const containerRef = useRef<HTMLDivElement>(null);
32  const [position, setPosition] = useState(initialPosition);
33  const [isDragging, setIsDragging] = useState(false);
34 
35  const handleMove = useCallback(
36    (clientX: number, clientY: number) => {
37      if (!containerRef.current) return;
38 
39      const rect = containerRef.current.getBoundingClientRect();
40      let newPosition: number;
41 
42      if (orientation === "horizontal") {
43        newPosition = ((clientX - rect.left) / rect.width) * 100;
44      } else {
45        newPosition = ((clientY - rect.top) / rect.height) * 100;
46      }
47 
48      setPosition(Math.max(0, Math.min(100, newPosition)));
49    },
50    [orientation],
51  );
52 
53  const handleMouseDown = (e: React.MouseEvent) => {
54    e.preventDefault();
55    setIsDragging(true);
56  };
57 
58  const handleTouchStart = () => {
59    setIsDragging(true);
60  };
61 
62  useEffect(() => {
63    const handleMouseMove = (e: MouseEvent) => {
64      if (isDragging) {
65        handleMove(e.clientX, e.clientY);
66      }
67    };
68 
69    const handleTouchMove = (e: TouchEvent) => {
70      if (isDragging && e.touches[0]) {
71        handleMove(e.touches[0].clientX, e.touches[0].clientY);
72      }
73    };
74 
75    const handleEnd = () => {
76      setIsDragging(false);
77    };
78 
79    if (isDragging) {
80      window.addEventListener("mousemove", handleMouseMove);
81      window.addEventListener("mouseup", handleEnd);
82      window.addEventListener("touchmove", handleTouchMove);
83      window.addEventListener("touchend", handleEnd);
84    }
85 
86    return () => {
87      window.removeEventListener("mousemove", handleMouseMove);
88      window.removeEventListener("mouseup", handleEnd);
89// … truncated