Many improvements.

components/AddLinkModal.tsx

@@ -3,26 +3,22 @@ import CollectionSelection from "./InputSelect/CollectionSelection";
 import TagSelection from "./InputSelect/TagSelection";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
-interface NewLink {
-  name: string;
-  url: string;
-  tags: string[];
-  collectionId:
-    | {
-        id: string | number;
-        isNew: boolean | undefined;
-      }
-    | object;
-}
+import { useRouter } from "next/router";
+import { NewLink } from "@/types/global";
+import useLinkSlice from "@/store/links";
 
 export default function () {
+  const router = useRouter();
+
   const [newLink, setNewLink] = useState<NewLink>({
     name: "",
     url: "",
     tags: [],
-    collectionId: {},
+    collectionId: { id: Number(router.query.id) },
   });
 
+  const { addLink } = useLinkSlice();
+
   const setTags = (e: any) => {
     const tagNames = e.map((e: any) => {
       return e.label;
@@ -54,7 +50,7 @@ export default function () {
   };
 
   return (
-    <div className="border-sky-100 border-solid border rounded-md shadow-lg p-5 bg-white flex flex-col gap-3">
+    <div className="slide-up border-sky-100 border-solid border rounded-md shadow-lg p-5 bg-white flex flex-col gap-3">
       <p className="font-bold text-sky-300 mb-2 text-center">New Link</p>
 
       <div className="flex gap-5 items-center justify-between">
@@ -64,8 +60,7 @@ export default function () {
           onChange={(e) => setNewLink({ ...newLink, name: e.target.value })}
           type="text"
           placeholder="e.g. Example Link"
-          className="w-60 rounded p-2 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
-          autoFocus
+          className="w-60 rounded p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
         />
       </div>
 
@@ -76,7 +71,7 @@ export default function () {
           onChange={(e) => setNewLink({ ...newLink, url: e.target.value })}
           type="text"
           placeholder="e.g. http://example.com/"
-          className="w-60 rounded p-2 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-60 rounded p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
         />
       </div>
 
@@ -92,7 +87,7 @@ export default function () {
 
       <div
         className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
-        onClick={() => postLink()}
+        onClick={() => addLink(newLink)}
       >
         <FontAwesomeIcon icon={faPlus} className="h-5" />
         Add Link