From 1156897864285dc074d3bc127f7cb8fd8ec68966 Mon Sep 17 00:00:00 2001
From: WCY-dt <834421194@qq.com>
Date: Sat, 4 May 2024 17:00:26 +0800
Subject: [PATCH] Refactor dropdown menu in Edit component

---
 src/popups/edit.tsx                | 15 ++++++++++-----
 src/styles/components/linkCard.css |  9 +++++----
 src/styles/popups/edit.css         |  6 +++++-
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/popups/edit.tsx b/src/popups/edit.tsx
index 5c3fc26..16c46fd 100644
--- a/src/popups/edit.tsx
+++ b/src/popups/edit.tsx
@@ -8,6 +8,7 @@ import "../styles/popups/edit.css";
 
 function Edit() {
   const {
+    routes,
     showEdit, setShowEdit,
     editContent,
     editType,
@@ -18,6 +19,8 @@ function Edit() {
     return null;
   }
 
+  const routesArray = Object.entries(routes).map(([value, label]) => ({ value, label }));
+
   return (
     <div className="Popup">
       <div className="Edit-title">Edit</div>
@@ -25,9 +28,11 @@ function Edit() {
         <label htmlFor="collection">Collection</label>
 
         <select id="collection" name="collection">
-          <option value="links">Links</option>
-          <option value="notes">Notes</option>
-          <option value="todos">Todos</option>
+          {routesArray.map((route, index) => (
+            <option key={index} value={route.label as string}>
+              {route.label as string}
+            </option>
+          ))}
         </select>
 
         <label htmlFor="title">Title</label>
@@ -49,8 +54,8 @@ function Edit() {
         <div className="Edit-links">
           {editType === 'modify' && editContent?.links?.map((link) => (
             <div key={link.Url} className="Edit-link">
-              <input type="text" name="link-title" className="Edit-link-title" defaultValue={link.Title} />
-              <input type="url" name="link-url" className="Edit-link-url" defaultValue={link.Url} />
+              <input type="text" name="link-title" className="Edit-link-title" defaultValue={link.Title} title="Link Title" />
+              <input type="url" name="link-url" className="Edit-link-url" defaultValue={link.Url} title="Link URL" />
               <Icon icon="ci:trash-full" className="Edit-link-delete"></Icon>
             </div>
           ))}
diff --git a/src/styles/components/linkCard.css b/src/styles/components/linkCard.css
index c1ae92b..7c1885b 100644
--- a/src/styles/components/linkCard.css
+++ b/src/styles/components/linkCard.css
@@ -65,16 +65,17 @@
     flex-direction: column;
     justify-content: end;
     align-items: center;
-
+    color: #666666;
     gap: 5px;
-
     font-size: 1.5rem;
-
     width: 100%;
-
     cursor: pointer;
 }
 
+.link-card-edit:hover {
+    color: black;
+}
+
 .link-card-edit-delete {
     color: white;
     background-color: rgba(255, 0, 0, 0.5);
diff --git a/src/styles/popups/edit.css b/src/styles/popups/edit.css
index 80d9963..2f23b57 100644
--- a/src/styles/popups/edit.css
+++ b/src/styles/popups/edit.css
@@ -118,10 +118,14 @@
 
 .Edit-input .Edit-links .Edit-links-add {
   font-size: 1.8rem;
-  color: black;
+  color: #666666;
   cursor: pointer;
 }
 
+.Edit-input .Edit-links .Edit-links-add:hover {
+  color: black;
+}
+
 .Edit-input label {
   font-size: 1.2rem;
   font-weight: 700;