src/components/PostHeader.astro


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

---
import { Card, CardContent, CardDescription, CardHeader } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";

interface Props {
  title: string;
  slug: string;
  description: string;
  author: string;
  publishDate: Date;
}

const { title, slug, description, author, publishDate } = Astro.props as Props;

const dateFormatter = new Intl.DateTimeFormat('en-GB', {
  day: '2-digit',
  month: 'long',
  year: 'numeric',
});
---

<Card className="w-full">
  <CardHeader>
    <div class="flex flex-wrap gap-2">
      <Badge variant="secondary">{author}</Badge>
      <Badge variant="outline">{dateFormatter.format(publishDate)}</Badge>
    </div>
    <h1 class="font-heading text-xl font-medium md:text-2xl" transition:name={`post-title-${slug}`}>{title}</h1>
    <CardDescription>{description}</CardDescription>
  </CardHeader>
  <CardContent>
    <Separator />
  </CardContent>
</Card>