articles-2

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  featured: {
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  articles: {
32    image: {
33      src: ImageMetadata
34      alt: string
35    }
36    category: string
37    title: string
38    description: string
39    href?: string
40    author: {
41      image?: ImageMetadata
42      initials: string
43      name: string
44      date: string
45    }
46  }[]
47}
48 
49const {
50  class: className,
51  badge,
52  title,
53  description,
54  featured,
55  articles,
56} = Astro.props
57---
58 
59<Section class={cn("", className)}>
60  <SectionContainer class="gap-8">
61    <div class="mx-auto max-w-2xl text-center">
62      {badge && <Badge variant="secondary">{badge}</Badge>}
63      <h2
64        class={cn(
65          "text-3xl font-semibold tracking-tight text-balance sm:text-4xl",
66          badge && "mt-4"
67        )}
68      >
69        {title}
70      </h2>
71      <p class="text-muted-foreground mt-2 text-base leading-7 text-balance">
72        {description}
73      </p>
74    </div>
75 
76    <a
77      href={featured.href ?? "#"}
78      class="group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4"
79    >
80      <Image
81        src={featured.image.src}
82        alt={featured.image.alt}
83        class="aspect-4/3 rounded-lg object-cover transition-opacity group-hover:opacity-85"
84        widths={[640, 960, 1280]}
85        sizes="(min-width: 64rem) 50vw, 100vw"
86      />
87      <div class="flex flex-col gap-4">
88        <Badge variant="outline" class="w-fit">{featured.category}</Badge>
89        <h3
90          class="text-foreground text-2xl leading-tight font-semibold sm:text-3xl"
91        >
92          {featured.title}
93        </h3>
94        <p class="text-muted-foreground text-base leading-7">
95          {featured.description}
96        </p>
97        <div class="flex items-center gap-3">
98          <Avatar>
99            <AvatarImage
100// … truncated