articles-3

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  articles: {
15    image: {
16      src: ImageMetadata
17      alt: string
18    }
19    category: string
20    title: string
21    description: string
22    href?: string
23    author: {
24      image?: ImageMetadata
25      initials: string
26      name: string
27      date: string
28    }
29  }[]
30}
31 
32const { class: className, badge, title, articles } = Astro.props
33---
34 
35<Section class={cn("", className)}>
36  <SectionContainer class="gap-8">
37    <div class="flex flex-wrap items-end justify-between gap-4">
38      <div class="flex 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      </div>
52    </div>
53 
54    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
55      {
56        articles.map((article) => (
57          <a
58            href={article.href ?? "#"}
59            class="group bg-muted/50 hover:bg-muted 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"
60          >
61            <Image
62              src={article.image.src}
63              alt={article.image.alt}
64              class="-mx-4 -mt-4 aspect-video w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85"
65              widths={[480, 720]}
66              sizes="(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw"
67            />
68            <div class="flex flex-col gap-2">
69              <p class="text-muted-foreground text-sm font-medium">
70                {article.category}
71              </p>
72              <h3 class="text-foreground line-clamp-2 text-lg leading-snug font-semibold">
73                {article.title}
74              </h3>
75              <p class="text-muted-foreground line-clamp-2 text-sm leading-6">
76                {article.description}
77              </p>
78            </div>
79            <div class="mt-auto flex items-center gap-3">
80              <Avatar>
81// … truncated