{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-02",
  "title": "Blog list rows",
  "description": "Dense hairline-divided list of articles showing category, title, date, and read time — no images, keyboard-navigable, high information density.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/blog/blog-02.tsx",
      "content": "import { ArrowRight } from \"lucide-react\"\n\nconst posts = [\n  {\n    id: 1,\n    category: \"Engineering\",\n    title: \"Migrating 40 services from REST to tRPC without downtime\",\n    date: \"Jun 3, 2025\",\n    readTime: \"10 min\",\n  },\n  {\n    id: 2,\n    category: \"Infrastructure\",\n    title: \"Why we replaced our Redis cluster with a single SQLite file\",\n    date: \"May 22, 2025\",\n    readTime: \"7 min\",\n  },\n  {\n    id: 3,\n    category: \"Product\",\n    title: \"The metrics that actually predicted user churn six months out\",\n    date: \"May 9, 2025\",\n    readTime: \"5 min\",\n  },\n  {\n    id: 4,\n    category: \"Design\",\n    title: \"Typography decisions that cut our support tickets in half\",\n    date: \"Apr 27, 2025\",\n    readTime: \"4 min\",\n  },\n  {\n    id: 5,\n    category: \"Engineering\",\n    title: \"Incremental static regeneration at the edge: a production audit\",\n    date: \"Apr 14, 2025\",\n    readTime: \"9 min\",\n  },\n  {\n    id: 6,\n    category: \"Culture\",\n    title: \"Running async sprints across seven time zones without losing context\",\n    date: \"Apr 1, 2025\",\n    readTime: \"6 min\",\n  },\n]\n\nexport default function Blog02() {\n  return (\n    <section className=\"bg-background py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-3xl px-6 sm:px-10\">\n        <div className=\"mb-12\">\n          <span className=\"font-mono text-[11px] uppercase tracking-widest text-muted-foreground\">\n            Writing\n          </span>\n          <h2 className=\"mt-3 text-3xl font-semibold tracking-tight text-foreground sm:text-4xl\">\n            Latest articles\n          </h2>\n        </div>\n\n        <ul className=\"flex flex-col divide-y divide-border\">\n          {posts.map((post) => (\n            <li key={post.id}>\n              <a\n                href=\"#\"\n                className=\"group flex items-start justify-between gap-6 py-5 transition-colors hover:text-primary\"\n              >\n                <div className=\"flex flex-col gap-1 min-w-0\">\n                  <span className=\"text-[11px] font-medium uppercase tracking-wider text-muted-foreground\">\n                    {post.category}\n                  </span>\n                  <span className=\"text-sm font-medium text-foreground group-hover:text-primary transition-colors truncate text-balance\">\n                    {post.title}\n                  </span>\n                </div>\n                <div className=\"flex shrink-0 items-center gap-4 pt-0.5\">\n                  <span className=\"hidden text-xs tabular-nums text-muted-foreground sm:block\">\n                    {post.readTime}\n                  </span>\n                  <span className=\"text-xs tabular-nums text-muted-foreground\">\n                    {post.date}\n                  </span>\n                  <ArrowRight className=\"size-3.5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-primary\" />\n                </div>\n              </a>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/blog-02.tsx"
    }
  ],
  "categories": [
    "blog"
  ],
  "type": "registry:block"
}