{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "articles-4",
  "registryDependencies": [
    "@fulldev/avatar",
    "@fulldev/badge",
    "@fulldev/section"
  ],
  "files": [
    {
      "path": "src/components/blocks/articles-4.astro",
      "content": "---\nimport type { ImageMetadata } from \"astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, description, articles } = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {\n        articles.map((article) => (\n          <a\n            href={article.href ?? \"#\"}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </a>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}