feat: added delete link functionality

components/ClickAwayHandler.tsx

@@ -16,7 +16,7 @@ function useOutsideAlerter(
         ref.current &&
         !ref.current.contains(event.target as HTMLInputElement)
       ) {
-        onClickOutside();
+        onClickOutside(event);
       }
     }
     document.addEventListener("mouseup", handleClickOutside);

components/Dropdown.tsx

@@ -19,15 +19,17 @@ export default function ({ onClickOutside, className, items }: Props) {
   return (
     <ClickAwayHandler
       onClickOutside={onClickOutside}
-      className={`${className} border border-sky-100 shadow mb-5 bg-gray-50 p-2 rounded flex flex-col gap-1`}
+      className={`${className} border border-sky-100 shadow mb-5 bg-gray-50 rounded flex flex-col `}
     >
       {items.map((e, i) => {
         const inner = (
-          <div className="flex items-center gap-2 p-2 rounded cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100">
-            {React.cloneElement(e.icon, {
-              className: "text-sky-500 w-5 h-5",
-            })}
-            <p className="text-sky-900">{e.name}</p>
+          <div className="cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100">
+            <div className="flex items-center gap-2 p-2 rounded hover:opacity-60 duration-100">
+              {React.cloneElement(e.icon, {
+                className: "text-sky-500 w-5 h-5",
+              })}
+              <p className="text-sky-900">{e.name}</p>
+            </div>
           </div>
         );
 

components/LinkList.tsx

@@ -13,6 +13,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useState } from "react";
 import Image from "next/image";
 import Dropdown from "./Dropdown";
+import useLinkStore from "@/store/links";
 
 export default function ({
   link,
@@ -24,6 +25,8 @@ export default function ({
   const [editDropdown, setEditDropdown] = useState(false);
   const [archiveLabel, setArchiveLabel] = useState("Archived Formats");
 
+  const { removeLink } = useLinkStore();
+
   const shortendURL = new URL(link.url).host.toLowerCase();
   const formattedDate = new Date(link.createdAt).toLocaleString("en-US", {
     year: "numeric",
@@ -52,7 +55,7 @@ export default function ({
           </div>
           <p className="text-sky-400 text-sm font-medium">{link.title}</p>
           <div className="flex gap-3 items-center flex-wrap my-3">
-            <div className="flex items-center gap-1 cursor-pointer hover:opacity-80 duration-100">
+            <div className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100">
               <FontAwesomeIcon icon={faFolder} className="w-4 text-sky-300" />
               <p className="text-sky-900">{link.collection.name}</p>
             </div>
@@ -86,6 +89,7 @@ export default function ({
             icon={faEllipsis}
             className="w-6 h-6 text-gray-500 rounded cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100 p-2"
             onClick={() => setEditDropdown(!editDropdown)}
+            id="edit-dropdown"
           />
           <div>
             <p className="text-center text-sky-400 text-sm font-bold">
@@ -142,9 +146,13 @@ export default function ({
                 {
                   name: "Delete",
                   icon: <FontAwesomeIcon icon={faTrashCan} />,
+                  onClick: () => removeLink(link),
                 },
               ]}
-              onClickOutside={() => setEditDropdown(!editDropdown)}
+              onClickOutside={(e: Event) => {
+                const target = e.target as HTMLInputElement;
+                if (target.id !== "edit-dropdown") setEditDropdown(false);
+              }}
               className="absolute top-10 right-0"
             />
           ) : null}

components/Sidebar/index.tsx

@@ -53,9 +53,13 @@ export default function () {
         <div
           className="flex gap-2 items-center mb-5 p-3 w-fit text-gray-600 cursor-pointer hover:outline outline-sky-100 outline-1 hover:bg-gray-50 rounded duration-100"
           onClick={() => setProfileDropdown(!profileDropdown)}
+          id="profile-dropdown"
         >
-          <FontAwesomeIcon icon={faCircleUser} className="h-5" />
-          <div className="flex items-center gap-1">
+          <FontAwesomeIcon
+            icon={faCircleUser}
+            className="h-5 pointer-events-none"
+          />
+          <div className="flex items-center gap-1 pointer-events-none">
             <p className="font-bold">{user?.name}</p>
             <FontAwesomeIcon icon={faChevronDown} className="h-3" />
           </div>
@@ -76,7 +80,10 @@ export default function () {
                 },
               },
             ]}
-            onClickOutside={() => setProfileDropdown(!profileDropdown)}
+            onClickOutside={(e: Event) => {
+              const target = e.target as HTMLInputElement;
+              if (target.id !== "profile-dropdown") setProfileDropdown(false);
+            }}
             className="absolute top-12 left-0"
           />
         ) : null}