more visual improvements

components/Dashboard/LinkItem.tsx

@@ -7,12 +7,19 @@ import { ExtendedLink } from "@/types/global";
 import {
   faFolder,
   faArrowUpRightFromSquare,
+  faEllipsis,
+  faPenToSquare,
+  faTrashCan,
 } from "@fortawesome/free-solid-svg-icons";
 import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useState } from "react";
 import Image from "next/image";
+import useLinkStore from "@/store/links";
+import EditLink from "../Modal/EditLink";
 import Link from "next/link";
+import Dropdown from "../Dropdown";
+import Modal from "../Modal";
 
 export default function ({
   link,
@@ -21,6 +28,11 @@ export default function ({
   link: ExtendedLink;
   count: number;
 }) {
+  const [expandDropdown, setExpandDropdown] = useState(false);
+  const [editModal, setEditModal] = useState(false);
+
+  const { removeLink } = useLinkStore();
+
   const url = new URL(link.url);
   const formattedDate = new Date(link.createdAt).toLocaleString("en-US", {
     year: "numeric",
@@ -28,14 +40,24 @@ export default function ({
     day: "numeric",
   });
 
+  const toggleEditModal = () => {
+    setEditModal(!editModal);
+  };
+
   return (
-    <div className="bg-white p-5 rounded-md flex items-start border border-sky-100 relative gap-5 lg:gap-10 group/item">
+    <div className="border border-sky-100 bg-white p-5 rounded-md flex items-start relative gap-5 sm:gap-10 group/item">
+      {editModal ? (
+        <Modal toggleModal={toggleEditModal}>
+          <EditLink toggleLinkModal={toggleEditModal} link={link} />
+        </Modal>
+      ) : null}
+
       <Image
         src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
-        width={32}
+        width={42}
-        height={32}
+        height={42}
         alt=""
-        className="select-none mt-3 z-10 rounded-md"
+        className="select-none mt-3 z-10 rounded-full border-[3px] border-sky-100"
         draggable="false"
         onError={(e) => {
           const target = e.target as HTMLElement;
@@ -47,15 +69,15 @@ export default function ({
         width={80}
         height={80}
         alt=""
-        className="blur-sm absolute left-2 opacity-40 select-none hidden lg:block"
+        className="blur-sm absolute left-2 opacity-40 select-none hidden sm:block"
         draggable="false"
         onError={(e) => {
           const target = e.target as HTMLElement;
           target.style.opacity = "0";
         }}
       />
-      <div className="flex justify-between gap-5 w-full z-0">
+      <div className="flex justify-between gap-5 w-full h-full z-0">
-        <div>
+        <div className="flex flex-col justify-between">
           <div className="flex items-baseline gap-1">
             <p className="text-sm text-sky-300 font-bold">{count + 1}.</p>
             <p className="text-lg text-sky-600">{link.name}</p>
@@ -94,34 +116,74 @@ export default function ({
         </div>
 
         <div className="flex flex-col justify-between items-end relative">
-          <a
+          <div
-            href={`/api/archives/${link.collectionId}/${encodeURIComponent(
+            onClick={() => setExpandDropdown(!expandDropdown)}
-              link.screenshotPath
+            id="edit-dropdown"
-            )}`}
+            className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100 p-1"
-            target="_blank"
-            title="Screenshot"
           >
             <FontAwesomeIcon
-              icon={faFileImage}
+              icon={faEllipsis}
-              className="w-8 h-8 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
+              title="More"
+              className="w-6 h-6"
+              id="edit-dropdown"
             />
-          </a>
+          </div>
-          <a
+          <div className="relative">
-            href={`/api/archives/${link.collectionId}/${encodeURIComponent(
+            <div className="flex flex-col items-end justify-center gap-1">
-              link.pdfPath
+              <a
-            )}`}
+                href={`/api/archives/${link.collectionId}/${encodeURIComponent(
-            target="_blank"
+                  link.screenshotPath
-            title="PDF"
+                )}`}
-          >
+                target="_blank"
-            <FontAwesomeIcon
+                title="Screenshot"
-              icon={faFilePdf}
+              >
-              className="w-8 h-8 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
+                <FontAwesomeIcon
+                  icon={faFileImage}
+                  className="w-5 h-5 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
+                />
+              </a>
+              <a
+                href={`/api/archives/${link.collectionId}/${encodeURIComponent(
+                  link.pdfPath
+                )}`}
+                target="_blank"
+                title="PDF"
+              >
+                <FontAwesomeIcon
+                  icon={faFilePdf}
+                  className="w-5 h-5 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
+                />
+              </a>
+            </div>
+          </div>
+
+          {expandDropdown ? (
+            <Dropdown
+              items={[
+                {
+                  name: "Edit",
+                  icon: <FontAwesomeIcon icon={faPenToSquare} />,
+                  onClick: () => {
+                    setEditModal(true);
+                    setExpandDropdown(false);
+                  },
+                },
+                {
+                  name: "Delete",
+                  icon: <FontAwesomeIcon icon={faTrashCan} />,
+                  onClick: () => {
+                    removeLink(link);
+                    setExpandDropdown(false);
+                  },
+                },
+              ]}
+              onClickOutside={(e: Event) => {
+                const target = e.target as HTMLInputElement;
+                if (target.id !== "edit-dropdown") setExpandDropdown(false);
+              }}
+              className="absolute top-8 right-0 w-36"
             />
-          </a>
+          ) : null}
-          <FontAwesomeIcon
-            icon={faArrowUpRightFromSquare}
-            className="w-8 h-8 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
-          />
         </div>
       </div>
     </div>

components/LinkList.tsx

@@ -30,7 +30,6 @@ export default function ({
 }) {
   const [expandDropdown, setExpandDropdown] = useState(false);
   const [editModal, setEditModal] = useState(false);
-  const [archiveLabel, setArchiveLabel] = useState("Archived Formats");
 
   const { removeLink } = useLinkStore();
 
@@ -77,8 +76,8 @@ export default function ({
           target.style.opacity = "0";
         }}
       />
-      <div className="flex justify-between gap-5 w-full z-0">
+      <div className="flex justify-between gap-5 w-full h-full z-0">
-        <div>
+        <div className="flex flex-col justify-between">
           <div className="flex items-baseline gap-1">
             <p className="text-sm text-sky-300 font-bold">{count + 1}.</p>
             <p className="text-lg text-sky-600">{link.name}</p>
@@ -129,26 +128,18 @@ export default function ({
               id="edit-dropdown"
             />
           </div>
-          <div>
+          <div className="relative">
-            <p className="text-center text-sky-400 text-sm font-bold">
+            <div className="flex flex-col items-end justify-center gap-1">
-              {archiveLabel}
-            </p>
-
-            <div
-              className="flex justify-center mt-3 gap-3"
-              onMouseLeave={() => setArchiveLabel("Archived Formats")}
-            >
               <a
                 href={`/api/archives/${link.collectionId}/${encodeURIComponent(
                   link.screenshotPath
                 )}`}
-                onMouseEnter={() => setArchiveLabel("Screenshot")}
                 target="_blank"
                 title="Screenshot"
               >
                 <FontAwesomeIcon
                   icon={faFileImage}
-                  className="w-8 h-8 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
+                  className="w-5 h-5 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
                 />
               </a>
               <a
@@ -156,19 +147,13 @@ export default function ({
                   link.pdfPath
                 )}`}
                 target="_blank"
-                onMouseEnter={() => setArchiveLabel("PDF")}
                 title="PDF"
               >
                 <FontAwesomeIcon
                   icon={faFilePdf}
-                  className="w-8 h-8 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
+                  className="w-5 h-5 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
                 />
               </a>
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="w-8 h-8 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
-                onMouseEnter={() => setArchiveLabel("Wayback Machine")}
-              />
             </div>
           </div>
 

pages/links.tsx

@@ -127,9 +127,11 @@ export default function Links() {
             ) : null}
           </div>
         </div>
-        {sortedLinks.map((e, i) => {
+        <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
-          return <LinkList key={i} link={e} count={i} />;
+          {sortedLinks.map((e, i) => {
-        })}
+            return <LinkList key={i} link={e} count={i} />;
+          })}
+        </div>
       </div>
     </MainLayout>
   );