Compare Slider Demo

1import { CompareSlider } from "@/registry/loomui/compare-slider"
2 
3function Panel({
4  label,
5  className,
6  children,
7}: {
8  label: string
9  className?: string
10  children: React.ReactNode
11}) {
12  return (
13    <div className={`h-full w-full p-4 sm:p-6 ${className ?? ""}`}>
14      <div className="text-[0.65rem] tracking-[0.2em] uppercase opacity-60">
15        {label}
16      </div>
17      <div className="mt-3 space-y-2">{children}</div>
18    </div>
19  )
20}
21 
22export default function CompareSliderDemo() {
23  return (
24    <CompareSlider
25      label="Compare the draft with the shipped page"
26      className="h-64 w-full max-w-2xl rounded-xl border"
27      before={
28        <Panel label="Draft" className="bg-muted text-muted-foreground">
29          <div className="bg-foreground/15 h-3 w-full max-w-40 rounded-full" />
30          <div className="bg-foreground/10 h-3 w-full max-w-56 rounded-full" />
31          <div className="bg-foreground/10 h-3 w-full max-w-48 rounded-full" />
32          <div className="bg-foreground/10 mt-6 h-9 w-28 rounded-md" />
33        </Panel>
34      }
35      after={
36        <Panel
37          label="Shipped"
38          className="from-primary/15 via-background to-background text-foreground bg-linear-to-br"
39        >
40          <div className="bg-primary h-3 w-full max-w-40 rounded-full" />
41          <div className="bg-foreground/30 h-3 w-full max-w-56 rounded-full" />
42          <div className="bg-foreground/20 h-3 w-full max-w-48 rounded-full" />
43          <div className="bg-primary text-primary-foreground mt-6 grid h-9 w-28 place-items-center rounded-md text-xs font-medium">
44            Get started
45          </div>
46        </Panel>
47      }
48    />
49  )
50}