articles-4

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