boilerplate

2026-03-03 18:43:35 -08:00
parent 66dace3f9b
commit 5ff5ef65c3
48 changed files with 4737 additions and 0 deletions
--- a/src/pages/posts/index.tsx
+++ b/src/pages/posts/index.tsx
@@ -0,0 +1,55 @@
+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>
+    </>
+  );
+}