Archived
21 lines
786 B
TypeScript
21 lines
786 B
TypeScript
import { getPosts } from '../api';
|
|
import { useAsync } from '../lib/useAsync';
|
|
import PostCard from '../components/PostCard';
|
|
|
|
export default function PostsPage() {
|
|
const { data: posts, loading } = useAsync(() => getPosts(), []);
|
|
const list = posts ?? [];
|
|
|
|
return (
|
|
<div className="mx-auto max-w-5xl">
|
|
<h1 className="mb-6 text-3xl font-bold md:text-4xl">Archive</h1>
|
|
<p className="mb-10 text-lg text-primary-700">Every post, newest first.</p>
|
|
{loading && <p className="text-primary-500">Loading…</p>}
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
|
{list.map((post) => <PostCard key={post.slug} post={post} />)}
|
|
</div>
|
|
{!loading && list.length === 0 && <p className="text-primary-500">No posts yet.</p>}
|
|
</div>
|
|
);
|
|
}
|