編集ページへのリンク追加

Author: Tim0401

app/notes/NoteList.tsx

@@ -29,7 +29,7 @@ type NoteProps = {
 const NoteItem: React.FC<NoteProps> = ({ item }) => {
   return (
     <div className="bg-gray-100 rounded-lg relative p-5 pt-8">
-      <Link href={`/notes`} className=" absolute -top-4 left-4">
+      <Link href={`/notes/${item.id}/edit`} className=" absolute -top-4 left-4">
         <span className="w-8 h-8 inline-flex justify-center items-center bg-pink-500 hover:bg-pink-700 text-white rounded-full">
           <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 25 25" fill="currentColor">
             <path d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z" />

app/notes/[id]/Note.tsx

@@ -32,7 +32,7 @@ const Note: React.FC<Props> = ({ item }) => {
       <p className="text-gray-500 break-all">{item.body}</p>
 
       <div className="flex flex-col sm:flex-row sm:justify-end gap-2.5">
-        <Link href={`/notes/${item.id}`} className="inline-block bg-pink-500 hover:bg-pink-600 active:bg-pink-700 focus-visible:ring ring-pink-300 text-white text-sm md:text-base font-semibold text-center rounded-lg outline-none transition duration-100 px-8 py-2">Edit</Link>
+        <Link href={`/notes/${item.id}/edit`} className="inline-block bg-pink-500 hover:bg-pink-600 active:bg-pink-700 focus-visible:ring ring-pink-300 text-white text-sm md:text-base font-semibold text-center rounded-lg outline-none transition duration-100 px-8 py-2">Edit</Link>
         <button onClick={deleteNote} className="inline-block bg-gray-200 hover:bg-gray-300 focus-visible:ring ring-pink-300 text-red-500 active:text-red-700 text-sm md:text-base font-semibold text-center rounded-lg outline-none transition duration-100 px-8 py-2">Delete</button>
       </div>
     </div>