56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import Head from "next/head";
|
|
|
|
import { PageShell } from "~/components/PageShell";
|
|
import { PostList } from "~/components/PostList";
|
|
import { api } from "~/utils/api";
|
|
|
|
const postSkeletonKeys = [
|
|
"posts-loading-1",
|
|
"posts-loading-2",
|
|
"posts-loading-3",
|
|
"posts-loading-4",
|
|
"posts-loading-5",
|
|
"posts-loading-6",
|
|
] as const;
|
|
|
|
export default function PostsPage() {
|
|
const postsQuery = api.post.list.useQuery({ limit: 24 });
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Posts | Web Boilerplate</title>
|
|
<meta content="Public post index for the generic Better Auth boilerplate." name="description" />
|
|
</Head>
|
|
|
|
<PageShell
|
|
eyebrow="Public Route"
|
|
intro="This page is intentionally unprotected. It should still be useful with an empty database and predictable after new posts are created."
|
|
title="Browse the full post index"
|
|
>
|
|
{postsQuery.error ? (
|
|
<div className="rounded-[24px] border border-[#6f4348] bg-[#231115] px-5 py-4 text-[#ffccd2] text-sm">
|
|
Failed to load posts: {postsQuery.error.message}
|
|
</div>
|
|
) : null}
|
|
|
|
{postsQuery.isPending ? (
|
|
<div className="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
|
|
{postSkeletonKeys.map((key) => (
|
|
<div className="h-64 animate-pulse rounded-[26px] border border-white/10 bg-white/[0.05]" key={key} />
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{postsQuery.data ? (
|
|
<PostList
|
|
emptyText="This route is live, but the database is still empty. Create the first post from the protected dashboard."
|
|
emptyTitle="Nothing to show yet"
|
|
posts={postsQuery.data}
|
|
/>
|
|
) : null}
|
|
</PageShell>
|
|
</>
|
|
);
|
|
}
|