Sync Grid: Render Quality

import { SyncGrid, SyncGridItem } from "@/components/ui/sync-grid";

// One clip, decoded once and drawn at four resolutions, so every card shows
// exactly the same frame.
const src = "https://assets.mixkit.co/videos/33957/33957-720.mp4";
const poster = "https://assets.mixkit.co/videos/33957/33957-thumb-720-0.jpg";

const passes = [
  { label: "Draft", resolution: 1 / 8, size: "160 × 90", time: "0.4s / frame" },
  { label: "Preview", resolution: 1 / 4, size: "320 × 180", time: "1.1s / frame" },
  { label: "High", resolution: 1 / 2, size: "640 × 360", time: "4.8s / frame" },
  { label: "Final", resolution: 1, size: "1280 × 720", time: "19s / frame" },
];

export function SyncGridRenderDemo() {
  return (
    <div className="w-full max-w-3xl">
      <div className="mb-4 flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
        <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
          Shot 04 · Lakeside <span className="font-normal text-zinc-500">· four render passes</span>
        </p>
        <p className="text-xs text-zinc-500">Drag Final onto Draft, then switch to Difference</p>
      </div>

      <SyncGrid columns={2}>
        {passes.map((pass) => (
          <SyncGridItem key={pass.label} label={pass.label} src={src} poster={poster} resolution={pass.resolution}>
            <div className="absolute top-9 left-2.5 flex gap-1">
              <span className="rounded-full bg-black/45 px-1.5 py-0.5 font-mono text-[10px] text-white/90 tabular-nums backdrop-blur-md">
                {pass.size}
              </span>
              <span className="rounded-full bg-black/45 px-1.5 py-0.5 font-mono text-[10px] text-white/90 tabular-nums backdrop-blur-md">
                {pass.time}
              </span>
            </div>
          </SyncGridItem>
        ))}
      </SyncGrid>
    </div>
  );
}