{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"video-grid","type":"registry:block","title":"Video Grid","description":"A wall of walkthroughs with durations and view counts.","categories":["video"],"dependencies":["lucide-react"],"registryDependencies":[],"css":{"@utility bg-dots":{"background-image":"radial-gradient(circle, color-mix(in oklab, var(--foreground) 16%, transparent) 1px, transparent 1px)","background-size":"14px 14px"}},"files":[{"path":"registry/blocks/video-grid.tsx","content":"import { Play } from \"lucide-react\";\n\nconst videos = [\n  { title: \"Zero to production in 12 minutes\", duration: \"12:04\", views: \"48k\", featured: true },\n  { title: \"Postgres branching, explained\", duration: \"8:31\", views: \"22k\", featured: false },\n  { title: \"Rollbacks that actually roll back\", duration: \"6:12\", views: \"31k\", featured: false },\n  { title: \"Edge functions deep dive\", duration: \"17:45\", views: \"15k\", featured: false },\n  { title: \"Monorepos without the tears\", duration: \"10:58\", views: \"27k\", featured: false },\n  { title: \"Office hours: your questions\", duration: \"42:19\", views: \"9k\", featured: false },\n];\n\nexport default function VideoGrid() {\n  return (\n    <section className=\"bg-background\">\n      <div className=\"mx-auto w-full max-w-6xl px-6 py-20 sm:py-24\">\n        <div className=\"mb-10 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between\">\n          <div>\n            <h2 className=\"text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n              Watch, then ship\n            </h2>\n            <p className=\"mt-2 max-w-md text-muted-foreground\">\n              Real walkthroughs by the engineers who built it — no marketing\n              voiceover.\n            </p>\n          </div>\n          <p className=\"font-mono text-xs text-muted-foreground tabular-nums\">\n            {videos.length} videos · updated weekly\n          </p>\n        </div>\n\n        <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {videos.map((video) => (\n            <button\n              key={video.title}\n              type=\"button\"\n              aria-label={`Play: ${video.title}, ${video.duration}`}\n              className=\"group overflow-hidden rounded-xl border border-border/60 bg-card text-left transition-colors hover:border-foreground/25\"\n            >\n              {/* CSS thumbnail */}\n              <div\n                aria-hidden\n                className={\n                  video.featured\n                    ? \"relative flex aspect-video items-center justify-center bg-foreground\"\n                    : \"relative flex aspect-video items-center justify-center border-b border-border/60 bg-dots\"\n                }\n              >\n                <span\n                  className={\n                    video.featured\n                      ? \"flex size-11 items-center justify-center rounded-full bg-background text-foreground shadow-lg transition-transform group-hover:scale-105 motion-reduce:transition-none\"\n                      : \"flex size-11 items-center justify-center rounded-full border border-border/60 bg-background shadow-sm transition-transform group-hover:scale-105 motion-reduce:transition-none\"\n                  }\n                >\n                  <Play className=\"ml-0.5 size-4 fill-current\" />\n                </span>\n                <span\n                  className={\n                    video.featured\n                      ? \"absolute right-2.5 bottom-2.5 rounded-md bg-background/15 px-1.5 py-0.5 font-mono text-[10px] text-background tabular-nums\"\n                      : \"absolute right-2.5 bottom-2.5 rounded-md bg-foreground/80 px-1.5 py-0.5 font-mono text-[10px] text-background tabular-nums\"\n                  }\n                >\n                  {video.duration}\n                </span>\n              </div>\n              <div className=\"p-4\">\n                <h3 className=\"text-sm font-medium group-hover:underline group-hover:underline-offset-4\">\n                  {video.title}\n                </h3>\n                <p className=\"mt-1 font-mono text-xs text-muted-foreground tabular-nums\">\n                  {video.views} views\n                </p>\n              </div>\n            </button>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:block","target":"components/blocks/video/video-grid.tsx"}]}