Comparison reveal

1"use client";2 3import { useState, type CSSProperties, type ReactNode } from "react";4 5export type ComparisonRevealProps = {6  before: ReactNode;7  after: ReactNode;8  beforeLabel?: string;9  afterLabel?: string;10  label?: string;11  position?: number;12  defaultPosition?: number;13  onPositionChange?: (position: number) => void;14  className?: string;15};16 17/** A keyboard-operable before/after surface. Both layers share one frame. */18export function ComparisonReveal({19  before,20  after,21  beforeLabel = "Before",22  afterLabel = "After",23  label = "Compare before and after",24  position,25  defaultPosition = 50,26  onPositionChange,27  className = "",28}: ComparisonRevealProps) {