Refactor dropdown menu in Edit component

WCY-dt · May 4, 2024 · 1156897 · 1156897
1 parent f93df81
commit 1156897
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git 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,16 +19,20 @@ function Edit() {
     return null;
   }
 
+  const routesArray = Object.entries(routes).map(([value, label]) => ({ value, label }));
+
   return (
     <div className="Popup">
       <div className="Edit-title">Edit</div>
       <div className="Edit-input">
         <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
@@ -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
@@ -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;