diff --git a/components/Dashboard/LinkItem.tsx b/components/Dashboard/LinkItem.tsx index ec606b5..4945ea0 100644 --- a/components/Dashboard/LinkItem.tsx +++ b/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 ( -
+
+ {editModal ? ( + + + + ) : null} + { 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"; }} /> -
-
+
+

{count + 1}.

{link.name}

@@ -94,34 +116,74 @@ export default function ({
- setExpandDropdown(!expandDropdown)} + 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" > - - - + + + {expandDropdown ? ( + , + onClick: () => { + setEditModal(true); + setExpandDropdown(false); + }, + }, + { + name: "Delete", + icon: , + 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" /> - - + ) : null}
diff --git a/components/LinkList.tsx b/components/LinkList.tsx index 499bc9e..193c2e7 100644 --- a/components/LinkList.tsx +++ b/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"; }} /> -
-
+
+

{count + 1}.

{link.name}

@@ -129,26 +128,18 @@ export default function ({ id="edit-dropdown" />
-
-

- {archiveLabel} -

- -
setArchiveLabel("Archived Formats")} - > + diff --git a/pages/links.tsx b/pages/links.tsx index fa13629..c48f144 100644 --- a/pages/links.tsx +++ b/pages/links.tsx @@ -127,9 +127,11 @@ export default function Links() { ) : null}
- {sortedLinks.map((e, i) => { - return ; - })} +
+ {sortedLinks.map((e, i) => { + return ; + })} +
);