Compare Slider

"use client";
import { useEffect, useRef, useState } from "react";

type State = "center" | "left" | "right";

export function CompareSlider({ state = "center" }: { state?: State }) {
const pct = state === "left" ? 25 : state === "right" ? 75 : 50;
const [pos, setPos] = useState(pct);
const ref = useRef<HTMLDivElement>(null);
const [dragging, setDragging] = useState(false);

useEffect(() => setPos(pct), [pct]);

useEffect(() => {
  function onMove(e: PointerEvent) {
    if (!dragging || !ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    setPos(Math.max(0, Math.min(100, x)));
  }
  function onUp() {
    setDragging(false);
  }
  if (dragging) {
    window.addEventListener("pointermove", onMove);
    window.addEventListener("pointerup", onUp);
    return () => {
      window.removeEventListener("pointermove", onMove);
      window.removeEventListener("pointerup", onUp);
    };
  }
}, [dragging]);

return (
  <div className="w-full max-w-md">
    <div
      ref={ref}
      className="relative aspect-[16/10] overflow-hidden rounded-xl border border-border select-none"
    >
      <div className="absolute inset-0 bg-gradient-to-br from-zinc-700 to-zinc-900">
        <div className="absolute inset-0 grid place-items-center">
          <span className="text-xs font-mono uppercase tracking-wider text-white/80">Before</span>
        </div>
      </div>
      <div
        className="absolute inset-y-0 left-0 overflow-hidden bg-gradient-to-br from-lab-accent via-pink-500 to-purple-600"
        style={{ width: `${pos}%` }}
      >
        <div
          className="absolute inset-0 grid place-items-center"
          style={{ width: `${(100 / pos) * 100}%` }}
        >
          <span className="text-xs font-mono uppercase tracking-wider text-white">After</span>
        </div>
      </div>
      <div
        className="absolute inset-y-0 -ml-px w-0.5 cursor-ew-resize bg-white shadow-lg"
        style={{ left: `${pos}%` }}
        onPointerDown={() => setDragging(true)}
      >
        <div className="absolute left-1/2 top-1/2 grid h-8 w-8 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-white shadow-md">
          <span className="font-mono text-[10px] text-zinc-700">◆◆</span>
        </div>
      </div>
    </div>
  </div>
);
}