[WIP]

layouts/LinkLayout.tsx

@@ -19,6 +19,8 @@ import {
 } from "@/types/global";
 import { useSession } from "next-auth/react";
 import useCollectionStore from "@/store/collections";
+import EditLinkModal from "@/components/ModalContent/EditLinkModal";
+import Link from "next/link";
 
 interface Props {
   children: ReactNode;
@@ -73,17 +75,17 @@ export default function LinkLayout({ children }: Props) {
       setLinkCollection(collections.find((e) => e.id === link?.collection?.id));
   }, [link, collections]);
 
+  const [editLinkModal, setEditLinkModal] = useState(false);
+
   return (
     <>
-      <ModalManagement />
-
       <div className="flex mx-auto">
         {/* <div className="hidden lg:block fixed left-5 h-screen">
           <LinkSidebar />
         </div> */}
 
         <div className="w-full flex flex-col min-h-screen max-w-screen-md mx-auto p-5">
-          <div className="flex gap-3 mb-5 duration-100 items-center justify-between">
+          <div className="flex gap-3 mb-3 duration-100 items-center justify-between">
             {/* <div
               onClick={toggleSidebar}
               className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-neutral-content"
@@ -91,33 +93,25 @@ export default function LinkLayout({ children }: Props) {
               <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
             </div> */}
 
-            <div
-              onClick={() => {
-                if (router.pathname.startsWith("/public")) {
-                  router.push(
-                    `/public/collections/${
+            <Link
+              href={
+                router.pathname.startsWith("/public")
+                  ? `/public/collections/${
                       linkCollection?.id || link?.collection.id
                     }`
-                  );
-                } else {
-                  router.push(`/dashboard`);
-                }
-              }}
-              className="inline-flex gap-1 hover:opacity-60 items-center select-none cursor-pointer p-2 lg:p-0 lg:px-1 lg:my-2 text-neutral rounded-md duration-100"
+                  : `/dashboard`
+              }
+              className="inline-flex gap-1 btn btn-ghost btn-sm text-neutral px-2"
             >
               <FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
-              Back{" "}
-              <span className="hidden sm:inline-block">
-                to{" "}
-                <span className="capitalize">
-                  {router.pathname.startsWith("/public")
-                    ? linkCollection?.name || link?.collection?.name
-                    : "Dashboard"}
-                </span>
+              <span className="capitalize">
+                {router.pathname.startsWith("/public")
+                  ? linkCollection?.name || link?.collection?.name
+                  : "Dashboard"}
               </span>
-            </div>
+            </Link>
 
-            <div className="flex gap-5">
+            <div className="flex gap-3">
               {link?.collection?.ownerId === userId ||
               linkCollection?.members.some(
                 (e) => e.userId === userId && e.canUpdate
@@ -125,20 +119,13 @@ export default function LinkLayout({ children }: Props) {
                 <div
                   title="Edit"
                   onClick={() => {
-                    link
-                      ? setModal({
-                          modal: "LINK",
-                          state: true,
-                          active: link,
-                          method: "UPDATE",
-                        })
-                      : undefined;
+                    setEditLinkModal(true);
                   }}
-                  className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
+                  className={`btn btn-ghost btn-square btn-sm`}
                 >
                   <FontAwesomeIcon
                     icon={faPen}
-                    className="w-6 h-6 text-neutral"
+                    className="w-4 h-4 text-neutral"
                   />
                 </div>
               ) : undefined}
@@ -201,6 +188,12 @@ export default function LinkLayout({ children }: Props) {
             </div>
           ) : null}
         </div>
+        {link && editLinkModal ? (
+          <EditLinkModal
+            onClose={() => setEditLinkModal(false)}
+            activeLink={link}
+          />
+        ) : undefined}
       </div>
     </>
   );