Compare

1"use client";
2
3import { Compare, type CompareProps } from "@/registry/ui";
4
5export function CompareDefaultExample(props: CompareProps) {
6  const {
7    firstImage = "https://placehold.co/1600x900?text=Before",
8    secondImage = "https://placehold.co/1600x900?text=After",
9    className = "w-full max-w-5xl h-[450px]",
10    firstImageClassName = "rounded-2xl",
11    secondImageClassName = "rounded-2xl",
12    initialSliderPercentage = 50,
13    slideMode = "hover",
14    showHandlebar = true,
15    autoplay = false,
16    autoplayDuration = 5000,
17    showPercentage = true,
18    showInstructions = true,
19    instructionsText = "Drag the slider to compare",
20  } = props;
21
22  return (
23    <Compare
24      firstImage={firstImage}
25      secondImage={secondImage}
26      className={className}
27      firstImageClassName={firstImageClassName}
28      secondImageClassName={secondImageClassName}
29      initialSliderPercentage={initialSliderPercentage}
30      slideMode={slideMode}
31      showHandlebar={showHandlebar}
32      autoplay={autoplay}
33      autoplayDuration={autoplayDuration}
34      showPercentage={showPercentage}
35      showInstructions={showInstructions}
36      instructionsText={instructionsText}
37    />
38  );
39}