{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "articles-1",
  "registryDependencies": [
    "@fulldev/avatar",
    "@fulldev/badge",
    "@fulldev/section"
  ],
  "files": [
    {
      "path": "src/components/blocks/articles-1.astro",
      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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    image: {\n      src: ImageMetadata\n      alt: string\n    }\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=\"flex max-w-2xl flex-col gap-4\">\n      {\n        badge && (\n          <Badge variant=\"secondary\" class=\"w-fit\">\n            {badge}\n          </Badge>\n        )\n      }\n      <h2\n        class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\"\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground text-base leading-7\">\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 p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-video w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\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"
}