Image Compare

1"use client";
2 
3import { useRef, useState, useCallback, useEffect } from "react";
4import { ChevronsLeftRight } from "lucide-react";
5import { cn } from "@/lib/utils";
6 
7interface ImageCompareProps {
8  label?: string;
9  title?: string;
10  description?: string;
11  beforeImage?: string;
12  afterImage?: string;
13  beforeLabel?: string;
14  afterLabel?: string;
15  initialPosition?: number;
16  className?: string;
17}
18 
19const ImageCompare = ({
20  label = "Before & After",
21  title = "See the difference, instantly.",
22  description = "Drag the slider to compare both sides and see the result in real time.",
23  beforeImage = "https://www.shadcnship.com/images/placeholders/hero-architecture-10.webp",
24  afterImage = "https://www.shadcnship.com/images/placeholders/hero-architecture-12.webp",
25  beforeLabel = "Before",
26  afterLabel = "After",
27  initialPosition = 50,
28  className,
29}: ImageCompareProps) => {
30  const [position, setPosition] = useState(initialPosition);
31  const [isDragging, setIsDragging] = useState(false);
32  const containerRef = useRef<HTMLDivElement>(null);
33 
34  const updatePosition = useCallback((clientX: number) => {
35    if (!containerRef.current) return;
36    const rect = containerRef.current.getBoundingClientRect();
37    const x = clientX - rect.left;
38    const pct = Math.min(Math.max((x / rect.width) * 100, 0), 100);
39    setPosition(pct);
40  }, []);
41 
42  useEffect(() => {
43    if (!isDragging) return;
44    const onMouseMove = (e: MouseEvent) => updatePosition(e.clientX);
45    const onMouseUp = () => setIsDragging(false);
46    window.addEventListener("mousemove", onMouseMove);
47    window.addEventListener("mouseup", onMouseUp);
48    return () => {
49      window.removeEventListener("mousemove", onMouseMove);
50      window.removeEventListener("mouseup", onMouseUp);
51    };
52  }, [isDragging, updatePosition]);
53 
54  return (
55    <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
56      <div className="mx-auto flex max-w-2xl flex-col items-center gap-4 text-center">
57        {label && (
58          <p className="text-sm font-semibold tracking-widest text-muted-foreground uppercase">
59            {label}
60          </p>
61        )}
62        <h2 className="text-4xl font-medium tracking-tight md:text-5xl">
63          {title}
64        </h2>
65        {description && (
66          <p className="text-muted-foreground md:text-lg">{description}</p>
67        )}
68      </div>
69 
70      <div className="mx-auto mt-12 max-w-5xl">
71        <div
72          ref={containerRef}
73          className={cn(
74// … truncated