diff options
| -rw-r--r-- | src/components/BlogPostCard.astro | 34 | ||||
| -rw-r--r-- | src/components/BlogPosts.astro | 21 | ||||
| -rw-r--r-- | src/components/PostHeader.astro | 35 |
3 files changed, 43 insertions, 47 deletions
diff --git a/src/components/BlogPostCard.astro b/src/components/BlogPostCard.astro new file mode 100644 index 0000000..875ddca --- /dev/null +++ b/src/components/BlogPostCard.astro @@ -0,0 +1,34 @@ +--- +import { Card, CardContent, CardDescription, CardHeader, CardFooter } 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="border rounded-none"> + <CardHeader className="border-b"> + <h2 class="font-heading text-sm font-medium" transition:name={`post-title-${slug}`}>{title}</h2> + <CardDescription>{description}</CardDescription> + </CardHeader> + <CardContent> + <div class="flex flex-wrap gap-2"> + <Badge variant="secondary">{author}</Badge> + <Badge variant="outline">{dateFormatter.format(publishDate)}</Badge> + </div> + </CardContent> +</Card> diff --git a/src/components/BlogPosts.astro b/src/components/BlogPosts.astro index 48b94f0..87a75f4 100644 --- a/src/components/BlogPosts.astro +++ b/src/components/BlogPosts.astro @@ -1,6 +1,8 @@ --- import { getCollection } from 'astro:content'; import { Card, CardContent, CardDescription, CardHeader } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import PostHeader from "@/components/PostHeader.astro"; // Fetch all blog posts from the content collection const posts = await getCollection('blog'); @@ -22,18 +24,13 @@ const dateFormatter = new Intl.DateTimeFormat('en-GB', { <div class="space-y-4 max-h-96 overflow-y-auto"> {sortedPosts.map((post) => ( <a href={`/posts/${post.id}`} class="block hover:opacity-80 transition-opacity" data-astro-prefetch> - <Card className="border rounded-xl"> - <CardHeader className="border-b"> - <h2 class="font-heading text-sm font-medium" transition:name={`post-title-${post.id}`}>{post.data.title}</h2> - <CardDescription>{post.data.description}</CardDescription> - </CardHeader> - <CardContent> - <div class="flex justify-between text-sm text-gray-500"> - <span>{dateFormatter.format(post.data.publishDate)}</span> - <span>by {post.data.author}</span> - </div> - </CardContent> - </Card> + <PostHeader + title={post.data.title} + slug={post.id} + description={post.data.description} + author={post.data.author} + publishDate={post.data.publishDate} + /> </a> ))} </div> diff --git a/src/components/PostHeader.astro b/src/components/PostHeader.astro deleted file mode 100644 index cea0965..0000000 --- a/src/components/PostHeader.astro +++ /dev/null @@ -1,35 +0,0 @@ ---- -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> |