{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-01",
  "title": "Blog 01",
  "description": "Blog section with post cards featuring cover images, category badges, titles, excerpts, and author info. Use it on content sites or product blogs to display articles in a clean, scannable grid layout.",
  "dependencies": [],
  "registryDependencies": [
    "badge",
    "card",
    "avatar"
  ],
  "files": [
    {
      "path": "src/registry/blocks/blog-01/blog.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\ninterface Author {\n  name: string;\n  avatar?: string;\n}\n\ninterface BlogPost {\n  img?: string;\n  category: string;\n  readTime: string;\n  title: string;\n  description: string;\n  author: Author;\n  date: string;\n  href?: string;\n}\n\ninterface Blog01Props {\n  label?: string;\n  title?: string;\n  description?: string;\n  posts?: BlogPost[];\n  className?: string;\n}\n\nconst BlogCard = ({\n  img,\n  category,\n  readTime,\n  title,\n  description,\n  author,\n  date,\n  href = \"#\",\n}: BlogPost) => (\n  <Card className=\"group overflow-hidden bg-transparent py-0 shadow-none\">\n    <a href={href} className=\"flex flex-col\">\n      <div className=\"aspect-4/3 w-full overflow-hidden rounded-t-md bg-muted/30\">\n        {img && (\n          <img\n            src={img}\n            alt={title}\n            className=\"size-full object-cover transition-transform duration-300 group-hover:scale-105\"\n          />\n        )}\n      </div>\n      <CardContent className=\"flex flex-col gap-4 p-4\">\n        <div className=\"flex items-center justify-between\">\n          <Badge variant=\"secondary\" className=\"rounded-full font-normal\">\n            {category}\n          </Badge>\n          <span className=\"text-sm text-muted-foreground\">{readTime}</span>\n        </div>\n        <div className=\"flex flex-col gap-2\">\n          <h3 className=\"text-lg leading-snug font-medium group-hover:underline\">\n            {title}\n          </h3>\n          <p className=\"line-clamp-2 text-sm text-muted-foreground\">\n            {description}\n          </p>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Avatar className=\"size-8\">\n            <AvatarImage src={author.avatar} alt={author.name} />\n            <AvatarFallback className=\"bg-muted/30\" />\n          </Avatar>\n          <div className=\"flex flex-col gap-0 text-xs\">\n            <p className=\"t font-medium\">{author.name}</p>\n            <p className=\"text-muted-foreground\">{date}</p>\n          </div>\n        </div>\n      </CardContent>\n    </a>\n  </Card>\n);\n\nconst Blog01 = ({\n  label = \"Blog\",\n  title = \"Latest Articles\",\n  description = \"Discover insights, tutorials, and best practices to build better products faster.\",\n  posts = [\n    {\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-10.webp\",\n      category: \"Design System\",\n      readTime: \"5 min read\",\n      title: \"Building Consistent UI with Shadcn\",\n      description:\n        \"Learn how to create a cohesive design system using Shadcn components.\",\n      author: {\n        name: \"Sarah Chen\",\n        avatar: \"https://www.shadcnship.com/images/avatars/avatar-1.webp\",\n      },\n      date: \"15 Jan, 2026\",\n    },\n    {\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-12.webp\",\n      category: \"Tutorial\",\n      readTime: \"8 min read\",\n      title: \"From Zero to Landing Page in 10 Minutes\",\n      description:\n        \"Ship your next project faster with pre-built blocks and components.\",\n      author: {\n        name: \"Marcus Johnson\",\n        avatar: \"https://www.shadcnship.com/images/avatars/avatar-4.webp\",\n      },\n      date: \"12 Jan, 2026\",\n    },\n    {\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-11.webp\",\n      category: \"Best Practices\",\n      readTime: \"4 min read\",\n      title: \"Accessible Components That Convert\",\n      description:\n        \"Why accessibility matters for your business and how to implement it.\",\n      author: {\n        name: \"Emily Rodriguez\",\n        avatar: \"https://www.shadcnship.com/images/avatars/avatar-5.webp\",\n      },\n      date: \"10 Jan, 2026\",\n    },\n  ],\n  className,\n}: Blog01Props) => (\n  <section className={cn(\"container mx-auto px-8 py-12 md:py-24\", className)}>\n    <div className=\"mx-auto flex max-w-2xl flex-col items-center gap-4 text-center\">\n      <p className=\"text-sm font-semibold tracking-widest text-muted-foreground uppercase\">\n        {label}\n      </p>\n      <h2 className=\"text-4xl font-medium tracking-tight md:text-5xl\">\n        {title}\n      </h2>\n      <p className=\"text-muted-foreground md:text-lg\">{description}</p>\n    </div>\n    <div className=\"mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3\">\n      {posts.map((post, index) => (\n        <BlogCard key={index} {...post} />\n      ))}\n    </div>\n  </section>\n);\n\nexport default Blog01;\n",
      "type": "registry:component",
      "target": "components/blog-01.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/blog-01.webp",
    "imageDark": "/r/previews/blog-01-dark.webp",
    "prose": {
      "about": "Blog 01 is a blog post grid section that displays article cards with a cover image, category badge, title, excerpt, and author avatar with name and date. Built with shadcn/ui Card, Badge, and Avatar components, it uses a three-column responsive grid that collapses to one column on mobile. The post data is passed as an array of objects — connect it to any CMS, MDX file system, or Supabase query to render real posts.",
      "whenToUse": [
        "Product blogs that want to surface recent articles on the marketing homepage",
        "Content marketing sections on SaaS landing pages that demonstrate topical expertise",
        "Documentation sites that feature a 'latest updates' or 'from the blog' section",
        "Any page where linking to published content builds authority and keeps visitors engaged longer"
      ],
      "notes": "Display three posts maximum in this layout for clean grid alignment on desktop. For a full paginated blog index, build a dedicated blog listing page rather than using this block with more items.",
      "faqs": [
        {
          "question": "Does Blog 01 fetch real posts automatically?",
          "answer": "No, post data is passed as an array of objects — connect it to a CMS, MDX files, or a Supabase query yourself."
        },
        {
          "question": "How many posts should I display?",
          "answer": "Three, for clean grid alignment on desktop. For a full paginated index, build a dedicated blog listing page instead of adding more items here."
        },
        {
          "question": "Does it support category badges?",
          "answer": "Yes, each post card includes a category badge field alongside the cover image, title, excerpt, and author avatar."
        }
      ]
    }
  },
  "categories": [
    "content"
  ],
  "type": "registry:block"
}