Cloned example to /test/table

src/app/test/table/page.tsx

@@ -0,0 +1,84 @@
+import { auth } from "~/server/auth";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/app/_components/ui/table";
+import { UserNav } from "~/app/_components/user-nav";
+import { DataTable } from "~/app/_components/data-table";
+import { z } from "zod";
+import { promises as fs } from "fs";
+import path from "path";
+import { columns } from "~/app/_components/columns";
+import { taskSchema } from "~/app/_components/schema";
+
+async function getTasks() {
+  const data = await fs.readFile(
+    path.join(process.cwd(), "src/app/_data/tasks.json"),
+  );
+
+  const tasks = JSON.parse(data.toString());
+
+  return z.array(taskSchema).parse(tasks);
+}
+
+export default async function Home() {
+  const session = await auth();
+  if (!session) {
+    <main>
+      <h1>Not signed in</h1>
+    </main>;
+  }
+
+  const tasks = await getTasks();
+
+  return (
+    <main className="my-20">
+      <h1 className="my-20 text-center text-2xl font-bold lowercase underline underline-offset-4">
+        {session?.user.name ? `${session.user.name}'s notes` : "notes"}
+      </h1>
+
+      <div className="mx-auto max-w-7xl px-6">
+        {/* <Table>
+          <TableCaption>A list of your recent invoices.</TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Invoice</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Method</TableHead>
+              <TableHead className="text-right">Amount</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell className="font-medium">INV001</TableCell>
+              <TableCell>Paid</TableCell>
+              <TableCell>Credit Card</TableCell>
+              <TableCell className="text-right">$250.00</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table> */}
+        <div className="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
+          <div className="flex items-center justify-between space-y-2">
+            <div>
+              <h2 className="text-2xl font-bold tracking-tight">
+                Welcome back!
+              </h2>
+              <p className="text-muted-foreground">
+                Here&apos;s a list of your tasks for this month!
+              </p>
+            </div>
+            <div className="flex items-center space-x-2">
+              <UserNav />
+            </div>
+          </div>
+          <DataTable data={tasks} columns={columns} />
+        </div>
+      </div>
+    </main>
+  );
+}