{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-4",
  "title": "Horizontal Media Cards",
  "description": "Blog archive as a vertical list of horizontal media cards, each with a thumbnail, category, read time, title, excerpt, and author.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "card"
  ],
  "files": [
    {
      "path": "registry/blocks/blog/4/blog-block.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\ntype Post = {\n  title: string\n  excerpt: string\n  category: string\n  readTime: string\n  date: string\n  image: string\n  author: { name: string; initials: string; avatar: string }\n}\n\nconst posts: Post[] = [\n  {\n    title: \"Designing for the first five minutes\",\n    excerpt:\n      \"Onboarding is the only part of your product every user sees. We rebuilt ours around a single question: what is the smallest win we can deliver today?\",\n    category: \"Product\",\n    readTime: \"6 Min Read\",\n    date: \"Jul 2, 2026\",\n    image:\n      \"https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=600&q=80\",\n    author: {\n      name: \"Devon Reyes\",\n      initials: \"DR\",\n      avatar: \"https://i.pravatar.cc/64?img=12\",\n    },\n  },\n  {\n    title: \"The case for boring infrastructure\",\n    excerpt:\n      \"Every exciting outage starts with an exciting technology choice. Here is why our platform team keeps reaching for the least novel option on the table.\",\n    category: \"Engineering\",\n    readTime: \"9 Min Read\",\n    date: \"Jun 24, 2026\",\n    image:\n      \"https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=600&q=80\",\n    author: {\n      name: \"Priya Nair\",\n      initials: \"PN\",\n      avatar: \"https://i.pravatar.cc/64?img=45\",\n    },\n  },\n  {\n    title: \"How we price without a sales team\",\n    excerpt:\n      \"Self-serve pricing sounds simple until you write the page. A look at the experiments, the mistakes, and the framework we landed on.\",\n    category: \"Growth\",\n    readTime: \"5 Min Read\",\n    date: \"Jun 15, 2026\",\n    image:\n      \"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&q=80\",\n    author: {\n      name: \"Sam Whitfield\",\n      initials: \"SW\",\n      avatar: \"https://i.pravatar.cc/64?img=59\",\n    },\n  },\n]\n\nfunction PostRow({ post }: { post: Post }) {\n  return (\n    <Card className=\"flex-row gap-0 overflow-hidden py-0 transition-colors hover:ring-foreground/25\">\n      <div className=\"aspect-[4/3] w-40 shrink-0 overflow-hidden bg-muted sm:w-52\">\n        <img\n          src={post.image}\n          alt=\"\"\n          className=\"size-full object-cover grayscale\"\n          loading=\"lazy\"\n        />\n      </div>\n      <div className=\"flex min-w-0 flex-col justify-center gap-2 p-5\">\n        <div className=\"flex items-center gap-3\">\n          <Badge variant=\"secondary\">{post.category}</Badge>\n          <span className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n            <IconPlaceholder\n              lucide=\"Clock\"\n              tabler=\"IconClock\"\n              hugeicons=\"TimeIcon\"\n              phosphor=\"Clock\"\n              remixicon=\"RiTimeLine\"\n              className=\"size-3.5 shrink-0\"\n              aria-hidden=\"true\"\n            />\n            {post.readTime}\n          </span>\n        </div>\n        <h3 className=\"font-heading text-base font-semibold tracking-tight text-balance text-foreground\">\n          {post.title}\n        </h3>\n        <p className=\"line-clamp-2 text-sm text-pretty text-muted-foreground\">\n          {post.excerpt}\n        </p>\n        <div className=\"mt-1 flex items-center gap-2\">\n          <Avatar className=\"size-6\">\n            <AvatarImage\n              src={post.author.avatar}\n              alt={post.author.name}\n              className=\"grayscale\"\n            />\n            <AvatarFallback>{post.author.initials}</AvatarFallback>\n          </Avatar>\n          <span className=\"text-xs font-medium\">{post.author.name}</span>\n          <span className=\"text-xs text-muted-foreground\">·</span>\n          <span className=\"text-xs text-muted-foreground tabular-nums\">\n            {post.date}\n          </span>\n        </div>\n      </div>\n    </Card>\n  )\n}\n\nexport default function BlogBlock() {\n  return (\n    <section className=\"flex min-h-svh w-full justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"w-full max-w-3xl\">\n        <div className=\"flex flex-wrap items-end justify-between gap-4\">\n          <div>\n            <h2 className=\"font-heading text-2xl font-bold tracking-tight text-balance sm:text-3xl\">\n              Latest Writing\n            </h2>\n            <p className=\"mt-2 text-muted-foreground\">\n              Notes on building, pricing, and running the product.\n            </p>\n          </div>\n          <Button variant=\"outline\">\n            All Posts\n            <IconPlaceholder\n              lucide=\"ArrowRight\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRightIcon\"\n              phosphor=\"ArrowRight\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n              aria-hidden=\"true\"\n            />\n          </Button>\n        </div>\n\n        <div className=\"mt-8 flex flex-col gap-4\">\n          {posts.map((post) => (\n            <PostRow key={post.title} post={post} />\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "796px",
    "tier": "free"
  },
  "categories": [
    "blog"
  ],
  "type": "registry:block"
}