publish tailwind post with new image diff component

components/image-diff.tsx

@@ -0,0 +1,133 @@
+/* eslint-disable jsx-a11y/alt-text, @next/next/no-img-element */
+"use client";
+
+import { ReactElement, Children, useState, useRef, useEffect } from "react";
+import { getImageProps } from "next/image";
+import { cn } from "@/lib/utils";
+import { ChevronsLeftRightIcon } from "lucide-react";
+
+const ImageDiff = ({ children, className }: { children: ReactElement[]; className?: string }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [sliderPosition, setSliderPosition] = useState(50);
+  const [isDragging, setIsDragging] = useState(false);
+
+  // Add event listeners to handle dragging outside the component
+  useEffect(() => {
+    const handleMouseUpGlobal = () => {
+      setIsDragging(false);
+    };
+
+    const handleMouseMoveGlobal = (e: MouseEvent) => {
+      if (!isDragging || !containerRef.current) return;
+
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+      const percentage = (x / rect.width) * 100;
+      setSliderPosition(percentage);
+    };
+
+    document.addEventListener("mouseup", handleMouseUpGlobal);
+    document.addEventListener("mousemove", handleMouseMoveGlobal);
+
+    return () => {
+      document.removeEventListener("mouseup", handleMouseUpGlobal);
+      document.removeEventListener("mousemove", handleMouseMoveGlobal);
+    };
+  }, [isDragging]);
+
+  // Extract the two image children
+  const childrenArray = Children.toArray(children);
+  if (childrenArray.length !== 2) {
+    console.error("ImageDiff must have exactly two children (before and after images)");
+    return null;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const beforeImageProps = getImageProps(children[0].props as any).props;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const afterImageProps = getImageProps(children[1].props as any).props;
+
+  const handleMouseDown = () => {
+    setIsDragging(true);
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!isDragging || !containerRef.current) return;
+
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+    const percentage = (x / rect.width) * 100;
+    setSliderPosition(percentage);
+  };
+
+  const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return;
+
+    const touch = e.touches[0];
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = Math.max(0, Math.min(touch.clientX - rect.left, rect.width));
+    const percentage = (x / rect.width) * 100;
+    setSliderPosition(percentage);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    const step = 5;
+    if (e.key === "ArrowLeft") {
+      setSliderPosition((prev) => Math.max(0, prev - step));
+      e.preventDefault();
+    } else if (e.key === "ArrowRight") {
+      setSliderPosition((prev) => Math.min(100, prev + step));
+      e.preventDefault();
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      onMouseMove={handleMouseMove}
+      onTouchMove={handleTouchMove}
+      onKeyDown={handleKeyDown}
+      className={cn("relative isolate w-full max-w-full overflow-hidden select-none", className)}
+      role="slider"
+      aria-label="Image comparison slider"
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={sliderPosition}
+      tabIndex={0}
+    >
+      {/* After image (full width, underneath) */}
+      <div className="h-full w-full">
+        <img {...afterImageProps} className="h-full w-full object-cover object-top-left" />
+      </div>
+
+      {/* Before image (clipped with width based on slider position) */}
+      <div className="absolute top-0 left-0 h-full overflow-hidden" style={{ width: `${sliderPosition}%` }}>
+        <img {...beforeImageProps} className="h-full w-full object-cover object-top-left" />
+      </div>
+
+      {/* Divider line */}
+      <div
+        className="bg-muted-foreground absolute top-0 bottom-0 w-1 -translate-x-1/2 drop-shadow-md"
+        style={{ left: `${sliderPosition}%` }}
+      />
+
+      {/* Slider handle */}
+      <div
+        onMouseDown={handleMouseDown}
+        onTouchStart={handleMouseDown}
+        onTouchEnd={handleMouseUp}
+        className="bg-muted absolute top-1/2 flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 cursor-ew-resize touch-none items-center justify-center rounded-full border-2 drop-shadow-md"
+        style={{ left: `${sliderPosition}%` }}
+        aria-hidden="true"
+      >
+        <ChevronsLeftRightIcon className="text-foreground/70 size-6" />
+      </div>
+    </div>
+  );
+};
+
+export default ImageDiff;