Compare Frame

import { ImageCompareFrame } from '@/components/ui/image-compare-frame'

import { ImageCompareFrame } from '@/components/ui/image-compare-frame'

/** Dense structural scene, tight grid, stacked blocks */
function DenseScene() {
  return (
    <div aria-hidden="true" className="bg-muted absolute inset-0 overflow-hidden">
      <div className="absolute inset-0 grid grid-cols-8 grid-rows-5 gap-px p-px opacity-55">
        {Array.from({ length: 40 }).map((_, i) => (
          <div key={i} className="bg-background/50 border-border/40 border" />
        ))}
      </div>
      <div className="relative flex h-full flex-col justify-end gap-2.5 p-5 sm:p-7">
        <div className="bg-background/70 border-border/50 h-14 w-full max-w-[58%] rounded-lg border" />
        <div className="flex gap-2">
          <div className="bg-background/60 border-border/40 h-9 w-9 rounded-md border" />
          <div className="bg-background/60 border-border/40 h-9 w-14 rounded-md border" />
          <div className="bg-background/60 border-border/40 h-9 w-9 rounded-md border" />
          <div className="bg-background/50 border-border/40 h-9 w-11 rounded-md border" />
        </div>
        <div className="bg-secondary/80 border-border/50 h-2.5 w-2/3 rounded-full border" />
        <div className="bg-secondary/60 border-border/40 h-2.5 w-1/2 rounded-full border" />
        <div className="bg-secondary/40 border-border/30 h-2.5 w-2/5 rounded-full border" />
      </div>
    </div>
  )
}

/** Open structural scene, sparse grid, fewer blocks */
function OpenScene() {
  return (
    <div aria-hidden="true" className="bg-background absolute inset-0 overflow-hidden">
      <div className="absolute inset-0 grid grid-cols-5 grid-rows-3 gap-px p-px opacity-25">
        {Array.from({ length: 15 }).map((_, i) => (
          <div key={i} className="bg-muted/50 border-border/30 border" />
        ))}
      </div>
      <div className="relative flex h-full flex-col justify-end gap-4 p-5 sm:p-7">
        <div className="bg-muted border-border/60 h-20 w-full max-w-[72%] rounded-lg border" />
        <div className="flex items-end gap-3">
          <div className="bg-muted border-border/50 h-12 w-28 rounded-lg border" />
          <div className="bg-muted/80 border-border/40 h-8 w-8 rounded-full border" />
        </div>
        <div className="bg-muted border-border/50 h-2 w-1/3 rounded-full border" />
      </div>
    </div>
  )
}

export default function ImageCompareFrameDemo() {
  return (
    <div className="mx-auto max-w-3xl px-4 py-12 sm:px-6 sm:py-16">
      <ImageCompareFrame
        first={<DenseScene />}
        second={<OpenScene />}
        firstLabel="Draft"
        secondLabel="Final"
        caption="Plate 04 · layout density · studio sample"
        defaultPosition={48}
        aspect="16 / 9"
      />
    </div>
  )
}