ImageCompare

import { useState } from "react";
import { ImageCompare } from "mizu-ui";

export function Example() {
  const [value, setValue] = useState(50);
  return (
    <ImageCompare
      label="Surface study"
      before={{
        src: "/images/field.svg",
        alt: "Ink surface with muted diamonds",
      }}
      after={{
        src: "/images/field-light.svg",
        alt: "Paper surface with warm diamonds",
      }}
      value={value}
      onValueChange={setValue}
      beforeLabel="Ink"
      afterLabel="Paper"
    />
  );
}