{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-5",
  "title": "Blog With Sticky Sidebar",
  "description": "Blog index with a post list beside a sticky sidebar of search, categories with counts, popular posts, and a tag cloud.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "input",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/blog/5/blog-block.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport { Input } from \"@/components/ui/input\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst posts = [\n  {\n    category: \"Engineering\",\n    title: \"How we cut our build times in half\",\n    excerpt:\n      \"A deep dive into the caching strategy and dependency graph work that made our CI dramatically faster.\",\n    author: \"Dana Wu\",\n    date: \"Jul 18, 2026\",\n    read: \"6 min read\",\n  },\n  {\n    category: \"Design\",\n    title: \"Designing empty states that guide, not block\",\n    excerpt:\n      \"Empty states are a first impression. Here's the system we use to turn dead ends into next steps.\",\n    author: \"Mia Cho\",\n    date: \"Jul 11, 2026\",\n    read: \"4 min read\",\n  },\n  {\n    category: \"Product\",\n    title: \"Shipping scheduled reports to every plan\",\n    excerpt:\n      \"Why we moved a former enterprise feature into the free tier, and what we learned from the rollout.\",\n    author: \"Ravi Patel\",\n    date: \"Jul 3, 2026\",\n    read: \"5 min read\",\n  },\n]\n\nconst categories = [\n  { name: \"Engineering\", count: 24 },\n  { name: \"Design\", count: 18 },\n  { name: \"Product\", count: 15 },\n  { name: \"Company\", count: 9 },\n]\n\nconst popular = [\n  \"A field guide to design tokens\",\n  \"Our approach to accessible components\",\n  \"Scaling Postgres past a billion rows\",\n]\n\nconst tags = [\"React\", \"Tailwind\", \"TypeScript\", \"Design systems\", \"DX\", \"CI\"]\n\nexport default function BlogBlock() {\n  return (\n    <section className=\"w-full bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-5xl\">\n        <div className=\"mb-10 flex flex-col gap-2\">\n          <p className=\"text-xs font-semibold tracking-widest text-muted-foreground uppercase\">\n            Blog\n          </p>\n          <h1 className=\"font-heading text-3xl font-bold tracking-tight\">\n            Notes from the team\n          </h1>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-10 lg:grid-cols-[1fr_16rem]\">\n          <div className=\"flex flex-col divide-y divide-border\">\n            {posts.map((post) => (\n              <article\n                key={post.title}\n                className=\"flex flex-col gap-3 py-6 first:pt-0\"\n              >\n                <div className=\"flex items-center gap-2\">\n                  <Badge variant=\"secondary\">{post.category}</Badge>\n                  <span className=\"text-xs text-muted-foreground\">\n                    {post.date} / {post.read}\n                  </span>\n                </div>\n                <a href=\"#\" className=\"group flex flex-col gap-2\">\n                  <h2 className=\"font-heading text-xl font-bold tracking-tight transition-colors group-hover:text-muted-foreground\">\n                    {post.title}\n                  </h2>\n                  <p className=\"text-sm text-muted-foreground\">\n                    {post.excerpt}\n                  </p>\n                </a>\n                <span className=\"text-xs text-muted-foreground\">\n                  By{\" \"}\n                  <span className=\"font-medium text-foreground\">\n                    {post.author}\n                  </span>\n                </span>\n              </article>\n            ))}\n          </div>\n\n          <aside className=\"flex flex-col gap-8 lg:sticky lg:top-8 lg:self-start\">\n            <div className=\"relative\">\n              <IconPlaceholder\n                lucide=\"Search\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlass\"\n                remixicon=\"RiSearchLine\"\n                className=\"pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground\"\n                aria-hidden=\"true\"\n              />\n              <Input\n                type=\"search\"\n                placeholder=\"Search articles...\"\n                className=\"pl-8\"\n                aria-label=\"Search articles\"\n              />\n            </div>\n\n            <div className=\"flex flex-col gap-3\">\n              <h3 className=\"font-heading text-xs font-semibold tracking-widest text-muted-foreground uppercase\">\n                Categories\n              </h3>\n              <ul className=\"flex flex-col gap-1\">\n                {categories.map((category) => (\n                  <li key={category.name}>\n                    <a\n                      href=\"#\"\n                      className=\"flex items-center justify-between py-1 text-sm text-muted-foreground transition-colors hover:text-foreground\"\n                    >\n                      {category.name}\n                      <span className=\"tabular-nums\">{category.count}</span>\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n\n            <Separator />\n\n            <div className=\"flex flex-col gap-3\">\n              <h3 className=\"font-heading text-xs font-semibold tracking-widest text-muted-foreground uppercase\">\n                Popular\n              </h3>\n              <ul className=\"flex flex-col gap-2.5\">\n                {popular.map((title) => (\n                  <li key={title}>\n                    <a\n                      href=\"#\"\n                      className=\"text-sm text-foreground transition-colors hover:text-muted-foreground\"\n                    >\n                      {title}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n\n            <div className=\"flex flex-col gap-3\">\n              <h3 className=\"font-heading text-xs font-semibold tracking-widest text-muted-foreground uppercase\">\n                Tags\n              </h3>\n              <div className=\"flex flex-wrap gap-1.5\">\n                {tags.map((tag) => (\n                  <Badge key={tag} variant=\"outline\" className=\"font-normal\">\n                    {tag}\n                  </Badge>\n                ))}\n              </div>\n            </div>\n          </aside>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "767px",
    "tier": "free"
  },
  "categories": [
    "blog"
  ],
  "type": "registry:block"
}