From 8b251a3ea197e6cda60220df73c8bedc0ed1e021 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Tue, 12 Nov 2024 15:37:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E4=BB=A5=E6=94=AF=E6=8C=81=E4=BB=A3=E7=A0=81=E7=89=87=E6=AE=B5?=
 =?UTF-8?q?=E9=93=BE=E6=8E=A5=E5=92=8C=E6=96=B0=E5=A2=9E=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1aa43a0..8d73987 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,29 @@
 import { db } from "@/db";
+import Link from "next/link";
 
 export default async function HomePage() {
   const snippets = await db.snippet.findMany();
   const renderedSnippets = snippets.map((snippet) => {
-    return <div key={snippet.id}>{snippet.title}</div>;
+    return (
+      <Link
+        key={snippet.id}
+        href={`/snippets/${snippet.id}`}
+        className="flex justify-between items-center p-2 border rounded"
+      >
+        <div>{snippet.title}</div>
+        <div>View</div>
+      </Link>
+    );
   });
-  return <div>{renderedSnippets}</div>;
+  return (
+    <div>
+      <div className="flex m-2 justify-between items-center">
+        <h1 className="text-xl font-bold">Snippets</h1>
+        <Link href="/snippets/new" className="border p-2 rounded">
+          New
+        </Link>
+      </div>
+      <div className="flex flex-col gap-2">{renderedSnippets}</div>
+    </div>
+  );
 }