articles-1

1---
2import type { ImageMetadata } from "astro"
3import { Image } from "astro:assets"
4 
5import { cn } from "@/lib/utils"
6import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
7import { Badge } from "@/components/ui/badge"
8import { Section, SectionContainer } from "@/components/ui/section"
9 
10type Props = {
11  class?: string
12  badge?: string
13  title: string
14  description: string
15  articles: {
16    image: {
17      src: ImageMetadata
18      alt: string
19    }
20    category: string
21    title: string
22    description: string
23    href?: string
24    author: {
25      image?: ImageMetadata
26      initials: string
27      name: string
28      date: string
29    }
30  }[]
31}
32 
33const { class: className, badge, title, description, articles } = Astro.props
34---
35 
36<Section class={cn("", className)}>
37  <SectionContainer class="gap-8">
38    <div class="flex max-w-2xl flex-col gap-4">
39      {
40        badge && (
41          <Badge variant="secondary" class="w-fit">
42            {badge}
43          </Badge>
44        )
45      }
46      <h2
47        class="text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
48      >
49        {title}
50      </h2>
51      <p class="text-muted-foreground text-base leading-7">
52        {description}
53      </p>
54    </div>
55 
56    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
57      {
58        articles.map((article) => (
59          <a
60            href={article.href ?? "#"}
61            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"
62          >
63            <Image
64              src={article.image.src}
65              alt={article.image.alt}
66              class="-mx-4 -mt-4 aspect-video w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85"
67              widths={[480, 720, 960]}
68              sizes="(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw"
69            />
70            <div class="flex flex-col gap-2">
71              <p class="text-muted-foreground text-sm font-medium">
72                {article.category}
73              </p>
74              <h3 class="text-foreground line-clamp-2 text-xl leading-snug font-semibold">
75                {article.title}
76              </h3>
77              <p class="text-muted-foreground line-clamp-2 text-sm leading-6">
78                {article.description}
79              </p>
80            </div>
81            <div class="mt-auto flex items-center gap-3">
82// … truncated