article-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  author: {
16    image?: ImageMetadata
17    initials: string
18    name: string
19    date: string
20    readingTime: string
21  }
22  image: {
23    src: ImageMetadata
24    alt: string
25  }
26}
27 
28const {
29  class: className,
30  badge,
31  title,
32  description,
33  author,
34  image,
35} = Astro.props
36---
37 
38<Section class={cn("", className)}>
39  <SectionContainer class="mx-auto max-w-2xl items-center gap-8 text-center">
40    <div class="mx-auto flex w-full max-w-2xl flex-col items-center gap-6">
41      {badge && <Badge variant="secondary">{badge}</Badge>}
42      <div class="flex flex-col gap-4">
43        <h1
44          class="text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl"
45        >
46          {title}
47        </h1>
48        <p class="text-muted-foreground text-lg leading-8 text-balance">
49          {description}
50        </p>
51      </div>
52      <div class="flex items-center gap-3">
53        <Avatar size="lg">
54          <AvatarImage src={author.image} alt={author.name} />
55          <AvatarFallback>{author.initials}</AvatarFallback>
56        </Avatar>
57        <div class="flex flex-col text-left">
58          <p class="text-sm font-medium">
59            {author.name}
60            <span class="text-muted-foreground font-normal">
61              &middot; {author.date}
62            </span>
63          </p>
64          <p class="text-muted-foreground text-xs">{author.readingTime}</p>
65        </div>
66      </div>
67    </div>
68 
69    <Image
70      src={image.src}
71      alt={image.alt}
72      class="aspect-16/10 w-full rounded-xl object-cover"
73      widths={[640, 960]}
74      sizes="(min-width: 42rem) 42rem, 100vw"
75    />
76 
77    <article
78      class="mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8"
79    >
80      <slot />
81    </article>
82  </SectionContainer>
83</Section>