compare

1"use client";
2import React, { useState, useEffect, useRef, useCallback } from "react";
3import { SparklesCore } from "@/components/ui/sparkles";
4import { AnimatePresence, motion } from "motion/react";
5import { cn } from "@/lib/utils";
6import { IconDotsVertical } from "@tabler/icons-react";
7 
8interface CompareProps {
9  firstImage?: string;
10  secondImage?: string;
11  className?: string;
12  firstImageClassName?: string;
13  secondImageClassname?: string;
14  initialSliderPercentage?: number;
15  slideMode?: "hover" | "drag";
16  showHandlebar?: boolean;
17  autoplay?: boolean;
18  autoplayDuration?: number;
19}
20export const Compare = ({
21  firstImage = "",
22  secondImage = "",
23  className,
24  firstImageClassName,
25  secondImageClassname,
26  initialSliderPercentage = 50,
27  slideMode = "hover",
28  showHandlebar = true,
29  autoplay = false,
30  autoplayDuration = 5000,
31}: CompareProps) => {
32  const [sliderXPercent, setSliderXPercent] = useState(initialSliderPercentage);
33  const [isDragging, setIsDragging] = useState(false);
34 
35  const sliderRef = useRef<HTMLDivElement>(null);
36 
37  const [isMouseOver, setIsMouseOver] = useState(false);
38 
39  const autoplayRef = useRef<NodeJS.Timeout | null>(null);
40 
41  const startAutoplay = useCallback(() => {
42    if (!autoplay) return;
43 
44    const startTime = Date.now();
45    const animate = () => {
46      const elapsedTime = Date.now() - startTime;
47      const progress =
48        (elapsedTime % (autoplayDuration * 2)) / autoplayDuration;
49      const percentage = progress <= 1 ? progress * 100 : (2 - progress) * 100;
50 
51      setSliderXPercent(percentage);
52      autoplayRef.current = setTimeout(animate, 16); // ~60fps
53    };
54 
55    animate();
56  }, [autoplay, autoplayDuration]);
57 
58  const stopAutoplay = useCallback(() => {
59    if (autoplayRef.current) {
60      clearTimeout(autoplayRef.current);
61      autoplayRef.current = null;
62    }
63  }, []);
64 
65  useEffect(() => {
66    startAutoplay();
67    return () => stopAutoplay();
68  }, [startAutoplay, stopAutoplay]);
69 
70  function mouseEnterHandler() {
71    setIsMouseOver(true);
72    stopAutoplay();
73  }
74 
75  function mouseLeaveHandler() {
76    setIsMouseOver(false);
77    if (slideMode === "hover") {
78      setSliderXPercent(initialSliderPercentage);
79    }
80    if (slideMode === "drag") {
81      setIsDragging(false);
82    }
83    startAutoplay();
84  }
85 
86  const handleStart = useCallback(
87    (clientX: number) => {
88      if (slideMode === "drag") {
89        setIsDragging(true);
90      }
91    },
92    [slideMode]
93  );
94 
95  const handleEnd = useCallback(() => {
96// … truncated