many changes across the app

components/Modal/DeleteCollection.tsx

@@ -34,7 +34,7 @@ export default function AddCollection({
   };
 
   return (
-    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
+    <div className="flex flex-col gap-3 sm:w-[33rem] w-72">
       <p className="font-bold text-sky-300 text-center">Delete Collection</p>
 
       <p className="text-sky-900 select-none text-center">

components/Modal/EditCollection.tsx

@@ -5,11 +5,17 @@
 
 import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClose, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
+import {
+  faClose,
+  faPenToSquare,
+  faTrashCan,
+} from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { ExtendedCollection } from "@/types/global";
 import { useSession } from "next-auth/react";
 import getPublicUserDataByEmail from "@/lib/client/getPublicUserDataByEmail";
+import Modal from "@/components/Modal";
+import DeleteCollection from "@/components/Modal/DeleteCollection";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -27,6 +33,12 @@ export default function EditCollection({
 
   const { updateCollection } = useCollectionStore();
 
+  const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
+
+  const toggleDeleteCollectionModal = () => {
+    setDeleteCollectionModal(!deleteCollectionModal);
+  };
+
   const session = useSession();
 
   const submit = async () => {
@@ -250,13 +262,41 @@ export default function EditCollection({
         );
       })}
 
-      <div
-        className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
-        onClick={submit}
-      >
-        <FontAwesomeIcon icon={faPenToSquare} className="h-5" />
-        Edit Collection
+      <div className="flex flex-col justify-center items-center gap-2 mt-2">
+        <div
+          className="bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
+          onClick={submit}
+        >
+          <FontAwesomeIcon icon={faPenToSquare} className="h-5" />
+          Edit Collection
+        </div>
+
+        <div className="flex items-center justify-center gap-2">
+          <hr className="w-16 border" />
+
+          <p className="text-gray-400 font-bold">OR</p>
+
+          <hr className="w-16 border" />
+        </div>
+
+        <div
+          onClick={() => {
+            toggleDeleteCollectionModal();
+          }}
+          className="w-fit inline-flex rounded-md cursor-pointer bg-red-500 hover:bg-red-400 duration-100 p-2"
+        >
+          <FontAwesomeIcon icon={faTrashCan} className="w-4 h-4 text-white" />
+        </div>
       </div>
+
+      {deleteCollectionModal ? (
+        <Modal toggleModal={toggleDeleteCollectionModal}>
+          <DeleteCollection
+            collection={activeCollection}
+            toggleCollectionModal={toggleDeleteCollectionModal}
+          />
+        </Modal>
+      ) : null}
     </div>
   );
 }

components/Modal/EditLink.tsx

@@ -10,6 +10,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ExtendedLink } from "@/types/global";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import useLinkStore from "@/store/links";
+import { faTrashCan } from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
   toggleLinkModal: Function;
@@ -19,7 +20,7 @@ type Props = {
 export default function EditLink({ toggleLinkModal, link }: Props) {
   const [currentLink, setCurrentLink] = useState<ExtendedLink>(link);
 
-  const { updateLink } = useLinkStore();
+  const { updateLink, removeLink } = useLinkStore();
 
   const shortendURL = new URL(link.url).host.toLowerCase();
 
@@ -85,12 +86,32 @@ export default function EditLink({ toggleLinkModal, link }: Props) {
         />
       </div>
 
-      <div
-        className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
-        onClick={submit}
-      >
-        <FontAwesomeIcon icon={faPenToSquare} className="h-5" />
-        Edit Link
+      <div className="flex flex-col justify-center items-center gap-2 mt-2">
+        <div
+          className="bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
+          onClick={submit}
+        >
+          <FontAwesomeIcon icon={faPenToSquare} className="h-5" />
+          Edit Link
+        </div>
+
+        <div className="flex items-center justify-center gap-2">
+          <hr className="w-16 border" />
+
+          <p className="text-gray-400 font-bold">OR</p>
+
+          <hr className="w-16 border" />
+        </div>
+
+        <div
+          onClick={() => {
+            removeLink(link);
+            toggleLinkModal();
+          }}
+          className="w-fit inline-flex rounded-md cursor-pointer bg-red-500 hover:bg-red-400 duration-100 p-2"
+        >
+          <FontAwesomeIcon icon={faTrashCan} className="w-4 h-4 text-white" />
+        </div>
       </div>
     </div>
   );

components/Modal/index.tsx

@@ -3,8 +3,10 @@
 // This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { ReactNode } from "react";
+import { MouseEventHandler, ReactNode } from "react";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
   toggleModal: Function;
@@ -13,9 +15,18 @@ type Props = {
 
 export default function ({ toggleModal, children }: Props) {
   return (
-    <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
-      <ClickAwayHandler onClickOutside={toggleModal} className="w-fit mx-auto">
-        <div className="slide-up border-sky-100 rounded-md border-solid border shadow-lg p-5 bg-white">
+    <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
+      <ClickAwayHandler onClickOutside={toggleModal} className="w-fit m-auto">
+        <div className="slide-up relative border-sky-100 rounded-md border-solid border shadow-lg p-5 bg-white">
+          <div
+            onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
+            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+          >
+            <FontAwesomeIcon
+              icon={faChevronLeft}
+              className="w-4 h-4 text-gray-500"
+            />
+          </div>
           {children}
         </div>
       </ClickAwayHandler>