46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import Link from "next/link";
|
|
import { servTrpc } from "~/app/_trpc/ServerClient";
|
|
import { Badge } from "~/components/ui/badge";
|
|
|
|
export default async function BlogPage() {
|
|
const posts = await servTrpc.blog.list();
|
|
|
|
return (
|
|
<main className="mx-auto max-w-2xl px-4 py-12">
|
|
<h1 className="mb-8 text-3xl font-bold">Blog</h1>
|
|
{posts.length === 0 ? (
|
|
<p className="text-muted-foreground">No posts yet.</p>
|
|
) : (
|
|
<ul className="space-y-6">
|
|
{posts.map((post) => (
|
|
<li key={post.slug}>
|
|
<Link href={`/blog/${post.slug}`} className="group block">
|
|
<h2 className="text-xl font-semibold group-hover:underline">{post.title}</h2>
|
|
{post.date && (
|
|
<time className="text-muted-foreground text-sm">
|
|
{new Date(post.date).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})}
|
|
</time>
|
|
)}
|
|
{post.description && (
|
|
<p className="text-muted-foreground mt-1">{post.description}</p>
|
|
)}
|
|
{post.tags && post.tags.length > 0 && (
|
|
<div className="mt-2 flex flex-wrap gap-1.5">
|
|
{post.tags.map((tag) => (
|
|
<Badge key={tag} variant="outline">{tag}</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</main>
|
|
);
|
|
}
|