45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import Link from 'next/link';
|
|
import { formatDate } from '@/lib/utils';
|
|
|
|
export type PostCardPost = {
|
|
slug: string;
|
|
title: string;
|
|
excerpt: string;
|
|
publishedAt: Date | null;
|
|
readingMinutes: number;
|
|
tags: { tag: { name: string; slug: string } }[];
|
|
author: { name: string; slug: string };
|
|
};
|
|
|
|
export function PostCard({ post }: { post: PostCardPost }) {
|
|
return (
|
|
<article className="card flex flex-col">
|
|
{post.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{post.tags.map(({ tag }) => (
|
|
<Link
|
|
key={tag.slug}
|
|
href={`/tags/${tag.slug}`}
|
|
className="badge bg-brand-50 text-brand-700 dark:bg-brand-700/20 dark:text-brand-100"
|
|
>
|
|
{tag.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
<h2 className="mt-3 text-lg font-semibold">
|
|
<Link href={`/blog/${post.slug}`} className="hover:underline">
|
|
{post.title}
|
|
</Link>
|
|
</h2>
|
|
<p className="muted mt-2 flex-1 text-sm">{post.excerpt}</p>
|
|
<p className="muted mt-4 text-xs">
|
|
{post.publishedAt ? formatDate(post.publishedAt) : 'Draft'} · {post.readingMinutes} min read ·{' '}
|
|
<Link href={`/authors/${post.author.slug}`} className="hover:underline">
|
|
{post.author.name}
|
|
</Link>
|
|
</p>
|
|
</article>
|
|
);
|
|
}
|