"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface ImageComparisonProps
  extends React.HTMLAttributes<HTMLDivElement> {
  beforeSrc?: string;
  afterSrc?: string;
  beforeAlt?: string;
  afterAlt?: string;
  initialValue?: number;
}

const defaultBefore =
  "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80";
const defaultAfter =
  "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1200&q=80";

export function ImageComparison({
  beforeSrc = defaultBefore,
  afterSrc = defaultAfter,
  beforeAlt = "Before image",
  afterAlt = "After image",
  initialValue = 50,
  className,
  ...props
}: ImageComparisonProps) {
  const [value, setValue] = React.useState(() =>
    Math.min(100, Math.max(0, initialValue))
  );

  return (
    <div className={cn("space-y-4", className)} {...props}>
      <div className="flex items-center justify-between text-sm text-muted-foreground">
        <span>Before</span>
        <span>After</span>
      </div>
      <div className="relative overflow-hidden rounded-2xl border border-border bg-card">
        <img
          src={afterSrc}
          alt={afterAlt}
          className="h-72 w-full object-cover"
        />
        <div
          className="absolute inset-0 overflow-hidden"
          style={{ width: `${value}%` }}
          aria-hidden
        >
          <img
            src={beforeSrc}
            alt={beforeAlt}
            className="h-72 w-full object-cover"
          />
        </div>
        <div
          className="pointer-events-none absolute inset-y-0"
          style={{ left: `calc(${value}% - 1px)` }}
        >
          <div className="h-full w-px bg-muted" />
        </div>
        <div
          className="pointer-events-none absolute top-1/2 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-card shadow-sm"
          style={{ left: `calc(${value}% - 20px)` }}
        >
          <svg
            viewBox="0 0 24 24"
            className="h-4 w-4 text-muted-foreground"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden
          >
            <path d="M8 5L3 12l5 7" />
            <path d="M16 19l5-7-5-7" />
          </svg>
        </div>
        <input
          type="range"
          min={0}
          max={100}
          value={value}
          onChange={(event) => setValue(Number(event.target.value))}
          className="absolute inset-0 h-full w-full cursor-ew-resize opacity-0"
          aria-label="Image comparison slider"
        />
      </div>
    </div>
  );
}
Image Comparison

Dependencies

Files

Installation
