set up the tasks page

src/app/list/[id]/page.tsx

@@ -0,0 +1,65 @@
+import { auth } from "~/server/auth";
+import { UserNav } from "~/app/_components/macro/user-nav";
+import { api } from "~/trpc/server";
+import { DataTable } from "~/app/_components/example/data-table";
+import { columns } from "~/app/_components/example/columns";
+import { Button } from "~/app/_components/ui/button";
+import { ArrowLeft } from "lucide-react";
+
+export default async function List({
+  params,
+}: {
+  params: Promise<{ id: number }>;
+}) {
+  const session = await auth();
+  if (!session) {
+    return (
+      <main>
+        <h1>Not signed in</h1>
+      </main>
+    );
+  }
+
+  const listId = (await params).id;
+  const list = await api.list.get({ listId });
+  if (!list) {
+    return (
+      <main>
+        <h1>No list found with id {listId}</h1>
+      </main>
+    );
+  }
+
+  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">
+        <div className="flex h-full flex-1 flex-col space-y-8 p-8">
+          <div className="flex items-center justify-between space-y-2">
+            <div className="flex flex-row items-center gap-4">
+              <Button size="icon" variant="ghost" className="rounded-full">
+                <ArrowLeft />
+              </Button>
+              <div>
+                <h2 className="text-2xl font-bold tracking-tight">
+                  {list.title}
+                </h2>
+                <p className="text-[0.8rem] text-neutral-500 dark:text-neutral-400">
+                  {list.variant}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-2">
+              <UserNav />
+            </div>
+          </div>
+
+          {/* <DataTable data={list.tasks} columns={columns} /> */}
+        </div>
+      </div>
+    </main>
+  );
+}