Tweak UI

Author: DLeyland

app/page.module.css

@@ -1,7 +1,8 @@
 .main {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  gap: 16px;
+  /* justify-content: ; */
   align-items: center;
   padding: 6rem;
   min-height: 100vh;

app/page.tsx

@@ -35,7 +35,7 @@ export default async function Home({
         {threads.data?.threads.map((thread) => {
           return (
             <div key={`thread-row-${thread.id}`}>
-              {thread.title} {thread.id}
+              <a href={`/thread/${thread.id}`}>{thread.title}</a>
             </div>
           );
         })}

app/thread/[threadId]/page.tsx

@@ -65,10 +65,5 @@ export default async function ThreadPage({
     .catch((err) => {
       console.log(err);
     });
-  return (
-    <div>
-      {params.threadId}
-      {JSON.stringify({ data })}
-    </div>
-  );
+  return <div>{JSON.stringify(data, null, 2)}</div>;
 }