article-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  author: {
16    image?: ImageMetadata
17    initials: string
18    name: string
19    date: string
20  }
21  image: {
22    src: ImageMetadata
23    alt: string
24  }
25}
26 
27const {
28  class: className,
29  badge,
30  title,
31  description,
32  author,
33  image,
34} = Astro.props
35---
36 
37<Section class={cn("", className)}>
38  <SectionContainer class="mx-auto max-w-2xl gap-8">
39    <div class="mx-auto flex w-full max-w-2xl flex-col gap-6">
40      {
41        badge && (
42          <Badge variant="secondary" class="w-fit">
43            {badge}
44          </Badge>
45        )
46      }
47      <div class="flex flex-col gap-4">
48        <h1
49          class="text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl"
50        >
51          {title}
52        </h1>
53        <p class="text-muted-foreground text-lg leading-8 text-balance">
54          {description}
55        </p>
56      </div>
57      <div class="flex items-center gap-3">
58        <Avatar size="lg">
59          <AvatarImage src={author.image} alt={author.name} />
60          <AvatarFallback>{author.initials}</AvatarFallback>
61        </Avatar>
62        <div class="flex flex-col">
63          <p class="text-sm font-medium">{author.name}</p>
64          <p class="text-muted-foreground text-xs">{author.date}</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-base leading-8"
79    >
80      <slot />
81    </article>
82  </SectionContainer>
83</Section>