Added tag support + Post link and many more changes and optimizations.

2023-02-24 21:02:28 +03:30 · 2023-02-24 21:02:28 +03:30 · 9b53608097
parent e0f4c71eb2
commit 9b53608097
36 changed files with 1062 additions and 176 deletions
--- a/components/AddLinkModal.tsx
+++ b/components/AddLinkModal.tsx
@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import CollectionSelection from "./InputSelect/CollectionSelection";
+import TagSelection from "./InputSelect/TagSelection";
+
+interface NewLink {
+  name: string;
+  url: string;
+  tags: string[];
+  collectionId:
+    | {
+        id: string | number;
+        isNew: boolean | undefined;
+      }
+    | object;
+}
+
+export default function () {
+  const [newLink, setNewLink] = useState<NewLink>({
+    name: "",
+    url: "",
+    tags: [],
+    collectionId: {},
+  });
+
+  const setTags = (e: any) => {
+    const tagNames = e.map((e: any) => {
+      return e.label;
+    });
+
+    setNewLink({ ...newLink, tags: tagNames });
+  };
+
+  const setCollection = (e: any) => {
+    const collection = { id: e?.value, isNew: e?.__isNew__ };
+
+    setNewLink({ ...newLink, collectionId: collection });
+  };
+
+  const postLink = async () => {
+    const response = await fetch("/api/routes/links", {
+      body: JSON.stringify(newLink),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    });
+
+    const data = await response.json();
+
+    console.log(newLink);
+
+    console.log(data);
+  };
+
+  return (
+    <div className="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">
+        <p className="text-sm font-bold text-sky-300">Name</p>
+        <input
+          value={newLink.name}
+          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
+        />
+      </div>
+
+      <div className="flex gap-5 items-center justify-between">
+        <p className="text-sm font-bold text-sky-300">URL</p>
+        <input
+          value={newLink.url}
+          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"
+        />
+      </div>
+
+      <div className="flex gap-5 items-center justify-between">
+        <p className="text-sm font-bold text-sky-300">Tags</p>
+        <TagSelection onChange={setTags} />
+      </div>
+
+      <div className="flex gap-5 items-center justify-between">
+        <p className="text-sm font-bold text-sky-300">Collection</p>
+        <CollectionSelection onChange={setCollection} />
+      </div>
+
+      <div
+        className="mx-auto mt-2 bg-sky-500 text-white py-2 px-5 rounded select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
+        onClick={() => postLink()}
+      >
+        Add Link
+      </div>
+    </div>
+  );
+}
--- a/components/ClickAwayHandler.tsx
+++ b/components/ClickAwayHandler.tsx
@ -20,19 +20,15 @@ function useOutsideAlerter(
      }
    }
    // Bind the event listener
-    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("mouseup", handleClickOutside);
    return () => {
      // Unbind the event listener on clean up
-      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("mouseup", handleClickOutside);
    };
  }, [ref, onClickOutside]);
 }

-export default function OutsideAlerter({
-  children,
-  onClickOutside,
-  className,
-}: Props) {
+export default function ({ children, onClickOutside, className }: Props) {
  const wrapperRef = useRef(null);
  useOutsideAlerter(wrapperRef, onClickOutside);

--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@ -0,0 +1,21 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { Collection } from "@prisma/client";
+
+export default function ({ collection }: { collection: Collection }) {
+  const formattedDate = new Date(collection.createdAt).toLocaleString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+
+  return (
+    <div className="p-5 bg-gray-100 m-2 h-40 w-60 rounded border-sky-100 border-solid border flex flex-col justify-between cursor-pointer hover:bg-gray-50 duration-100">
+      <div className="flex justify-between text-sky-900 items-center">
+        <p className="text-lg w-max">{collection.name}</p>
+        <FontAwesomeIcon icon={faChevronRight} className="w-3" />
+      </div>
+      <p className="text-sm text-sky-300 font-bold">{formattedDate}</p>
+    </div>
+  );
+}
--- a/components/CollectionCards.tsx
+++ b/components/CollectionCards.tsx
@ -1,32 +0,0 @@
-import useCollectionSlice from "@/store/collection";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
-
-export default function Collections() {
-  const { collections } = useCollectionSlice();
-
-  return (
-    <div className="flex flex-wrap">
-      {collections.map((e, i) => {
-        const formattedDate = new Date(e.createdAt).toLocaleString("en-US", {
-          year: "numeric",
-          month: "short",
-          day: "numeric",
-        });
-
-        return (
-          <div
-            className="p-5 bg-gray-100 m-2 h-40 w-60 rounded border-sky-100 border-solid border flex flex-col justify-between cursor-pointer hover:shadow duration-100"
-            key={i}
-          >
-            <div className="flex justify-between text-sky-900">
-              <p className="text-lg w-max">{e.name}</p>
-              <FontAwesomeIcon icon={faChevronRight} className="w-3" />
-            </div>
-            <p className="text-sm text-sky-300">{formattedDate}</p>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
--- a/components/InputSelect/CollectionSelection.tsx
+++ b/components/InputSelect/CollectionSelection.tsx
@ -0,0 +1,43 @@
+import useCollectionSlice from "@/store/collection";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import CreatableSelect from "react-select/creatable";
+import { styles } from "./styles";
+import { Options } from "./types";
+
+export default function ({ onChange }: any) {
+  const { collections } = useCollectionSlice();
+  const router = useRouter();
+
+  const [options, setOptions] = useState<Options[]>([]);
+
+  const collectionId = Number(router.query.id);
+
+  const activeCollection = collections.find((e) => {
+    return e.id === collectionId;
+  });
+
+  const defaultCollection = {
+    value: activeCollection?.id,
+    label: activeCollection?.name,
+  };
+
+  useEffect(() => {
+    const formatedCollections = collections.map((e) => {
+      return { value: e.id, label: e.name };
+    });
+
+    setOptions(formatedCollections);
+  }, [collections]);
+
+  return (
+    <CreatableSelect
+      isClearable
+      onChange={onChange}
+      options={options}
+      styles={styles}
+      defaultValue={defaultCollection}
+      menuPosition="fixed"
+    />
+  );
+}
--- a/components/InputSelect/TagSelection.tsx
+++ b/components/InputSelect/TagSelection.tsx
@ -0,0 +1,30 @@
+import useTagSlice from "@/store/tags";
+import { useEffect, useState } from "react";
+import CreatableSelect from "react-select/creatable";
+import { styles } from "./styles";
+import { Options } from "./types";
+
+export default function ({ onChange }: any) {
+  const { tags } = useTagSlice();
+
+  const [options, setOptions] = useState<Options[]>([]);
+
+  useEffect(() => {
+    const formatedCollections = tags.map((e) => {
+      return { value: e.id, label: e.name };
+    });
+
+    setOptions(formatedCollections);
+  }, [tags]);
+
+  return (
+    <CreatableSelect
+      isClearable
+      onChange={onChange}
+      options={options}
+      styles={styles}
+      menuPosition="fixed"
+      isMulti
+    />
+  );
+}
--- a/components/InputSelect/styles.ts
+++ b/components/InputSelect/styles.ts
@ -0,0 +1,64 @@
+import { StylesConfig } from "react-select";
+
+const font =
+  "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji";
+
+export const styles: StylesConfig = {
+  option: (styles, state) => ({
+    ...styles,
+    fontFamily: font,
+    cursor: "pointer",
+    backgroundColor: state.isSelected ? "#0ea5e9" : "inherit",
+    "&:hover": {
+      backgroundColor: state.isSelected ? "#0ea5e9" : "#bae6fd",
+    },
+    transition: "all 50ms",
+  }),
+  control: (styles) => ({
+    ...styles,
+    fontFamily: font,
+    border: "none",
+  }),
+  container: (styles) => ({
+    ...styles,
+    width: "15rem",
+    border: "1px solid #e0f2fe",
+    borderRadius: "0.25rem",
+    fontSize: "0.875rem",
+    lineHeight: "1.25rem",
+  }),
+  input: (styles) => ({
+    ...styles,
+    cursor: "text",
+  }),
+  dropdownIndicator: (styles) => ({
+    ...styles,
+    cursor: "pointer",
+  }),
+  clearIndicator: (styles) => ({
+    ...styles,
+    cursor: "pointer",
+  }),
+  placeholder: (styles) => ({
+    ...styles,
+    borderColor: "black",
+  }),
+  multiValue: (styles) => {
+    return {
+      ...styles,
+      backgroundColor: "#0ea5e9",
+      color: "white",
+    };
+  },
+  multiValueLabel: (styles) => ({
+    ...styles,
+    color: "white",
+  }),
+  multiValueRemove: (styles) => ({
+    ...styles,
+    ":hover": {
+      color: "white",
+      backgroundColor: "#38bdf8",
+    },
+  }),
+};
--- a/components/InputSelect/types.ts
+++ b/components/InputSelect/types.ts
@ -0,0 +1,4 @@
+export interface Options {
+  value: string | number;
+  label: string;
+}
--- a/components/Loader.tsx
+++ b/components/Loader.tsx
@ -1,4 +1,4 @@
-export default function Loader() {
+export default function () {
  return (
    <div>
      <p>Loading...</p>
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@ -1,11 +1,59 @@
 import { signOut } from "next-auth/react";
+import { useRouter } from "next/router";
+import useCollectionSlice from "@/store/collection";
+import { Collection } from "@prisma/client";
+import ClickAwayHandler from "./ClickAwayHandler";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { useState } from "react";
+import AddLinkModal from "./AddLinkModal";
+
+export default function () {
+  const router = useRouter();
+  const collectionId = router.query.id;
+
+  const { collections } = useCollectionSlice();
+
+  const activeCollection: Collection | undefined = collections.find(
+    (e) => e.id.toString() == collectionId
+  );
+
+  const [collectionInput, setCollectionInput] = useState(false);
+
+  const toggleCollectionInput = () => {
+    setCollectionInput(!collectionInput);
+  };

-export default function Navbar() {
  return (
-    <div className="flex justify-between p-5 border-solid border-b-sky-100 border border-l-white">
-      <p>Navbar</p>
-      <div onClick={() => signOut()} className="cursor-pointer w-max">
-        Sign Out
+    <div className="flex justify-between items-center p-5 border-solid border-b-sky-100 border border-l-white">
+      <p>{activeCollection?.name}</p>
+      <div className="flex items-center gap-3">
+        <FontAwesomeIcon
+          icon={faPlus}
+          onClick={toggleCollectionInput}
+          className="select-none cursor-pointer w-5 h-5 text-white bg-sky-500 p-2 rounded hover:bg-sky-400 duration-100"
+        />
+        <FontAwesomeIcon
+          icon={faMagnifyingGlass}
+          className="select-none cursor-pointer w-5 h-5 text-white bg-sky-500 p-2 rounded hover:bg-sky-400 duration-100"
+        />
+        <div
+          onClick={() => signOut()}
+          className="cursor-pointer w-max text-sky-900"
+        >
+          Sign Out
+        </div>
+
+        {collectionInput ? (
+          <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center">
+            <ClickAwayHandler
+              onClickOutside={toggleCollectionInput}
+              className="w-fit mx-auto"
+            >
+              <AddLinkModal />
+            </ClickAwayHandler>
+          </div>
+        ) : null}
      </div>
    </div>
  );
--- a/components/Sidebar/SidebarItem.tsx
+++ b/components/Sidebar/SidebarItem.tsx
@ -0,0 +1,26 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Collection } from "@prisma/client";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { MouseEventHandler } from "react";
+
+interface TextObject {
+  name: string;
+}
+
+interface SidebarItemProps {
+  item: Collection | TextObject;
+  icon: IconProp;
+  onClick?: MouseEventHandler;
+}
+
+export default function ({ item, icon, onClick }: SidebarItemProps) {
+  return (
+    <div
+      onClick={onClick}
+      className="hover:bg-gray-50 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2"
+    >
+      <FontAwesomeIcon icon={icon} className="w-4 text-sky-300" />
+      <p>{item.name}</p>
+    </div>
+  );
+}
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@ -3,20 +3,26 @@ import ClickAwayHandler from "@/components/ClickAwayHandler";
 import { useState } from "react";
 import useCollectionSlice from "@/store/collection";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFolder, faUserCircle } from "@fortawesome/free-regular-svg-icons";
+import { faUserCircle } from "@fortawesome/free-regular-svg-icons";
 import {
-  faDatabase,
  faPlus,
  faChevronDown,
+  faFolder,
+  faHouse,
+  faHashtag,
 } from "@fortawesome/free-solid-svg-icons";
+import SidebarItem from "./SidebarItem";
+import useTagSlice from "@/store/tags";

-export default function Sidebar() {
+export default function () {
  const { data: session } = useSession();

  const [collectionInput, setCollectionInput] = useState(false);

  const { collections, addCollection } = useCollectionSlice();

+  const { tags } = useTagSlice();
+
  const user = session?.user;

  const toggleCollectionInput = () => {
@ -36,7 +42,7 @@ export default function Sidebar() {

  return (
    <div className="fixed bg-gray-100 top-0 bottom-0 left-0 w-80 p-5 overflow-y-auto hide-scrollbar border-solid border-r-sky-100 border">
-      <div className="flex gap-3 items-center mb-5 cursor-pointer w-fit text-gray-600">
+      <div className="flex gap-3 items-center mb-5 p-3 cursor-pointer w-fit text-gray-600">
        <FontAwesomeIcon icon={faUserCircle} className="h-8" />
        <div className="flex items-center gap-1">
          <p>{user?.name}</p>
@ -44,13 +50,10 @@ export default function Sidebar() {
        </div>
      </div>

-      <div className="hover:bg-sky-100 hover:shadow-sm duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
-        <FontAwesomeIcon icon={faDatabase} className="w-4" />
-        <p>All Collections</p>
-      </div>
+      <SidebarItem item={{ name: "All Collections" }} icon={faHouse} />

      <div className="text-gray-500 flex items-center justify-between mt-5">
-        <p>Collections</p>
+        <p className="text-sm p-3">Collections</p>
        {collectionInput ? (
          <ClickAwayHandler
            onClickOutside={toggleCollectionInput}
@ -59,7 +62,7 @@ export default function Sidebar() {
            <input
              type="text"
              placeholder="Enter Collection Name"
-              className="w-44 rounded p-1"
+              className="w-44 rounded p-2 border-sky-100 border-solid border text-sm outline-none"
              onKeyDown={submitCollection}
              autoFocus
            />
@ -68,21 +71,21 @@ export default function Sidebar() {
          <FontAwesomeIcon
            icon={faPlus}
            onClick={toggleCollectionInput}
-            className="select-none cursor-pointer rounded p-2 w-3"
+            className="select-none cursor-pointer p-2 w-3"
          />
        )}
      </div>
      <div>
        {collections.map((e, i) => {
-          return (
-            <div
-              className="hover:bg-sky-100 hover:shadow-sm duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2"
-              key={i}
-            >
-              <FontAwesomeIcon icon={faFolder} className="w-4" />
-              <p>{e.name}</p>
-            </div>
-          );
+          return <SidebarItem key={i} item={e} icon={faFolder} />;
+        })}
+      </div>
+      <div className="text-gray-500 flex items-center justify-between mt-5">
+        <p className="text-sm p-3">Tags</p>
+      </div>
+      <div>
+        {tags.map((e, i) => {
+          return <SidebarItem key={i} item={e} icon={faHashtag} />;
        })}
      </div>
    </div>
--- a/hooks/useRedirection.tsx
+++ b/hooks/useRedirection.tsx
@ -2,7 +2,7 @@ import { ReactNode, useEffect, useState } from "react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";

-export default function useRedirection() {
+export default function () {
  const router = useRouter();
  const { status } = useSession();
  const [redirect, setRedirect] = useState(true);
--- a/layouts/MainLayout.tsx
+++ b/layouts/MainLayout.tsx
@ -12,7 +12,7 @@ interface Props {
  children: ReactNode;
 }

-export default function Layout({ children }: Props) {
+export default function ({ children }: Props) {
  const { status } = useSession();
  const router = useRouter();
  const redirection = useRedirection();
@ -29,7 +29,7 @@ export default function Layout({ children }: Props) {
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <Sidebar />
-        <div className="ml-80 w-full">
+        <div className="ml-80">
          <Navbar />
          {children}
        </div>
--- a/lib/api/controllers/collections/getCollections.ts
+++ b/lib/api/controllers/collections/getCollections.ts
@ -2,7 +2,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { prisma } from "@/lib/api/db";
 import { Session } from "next-auth";

-export default async function handler(
+export default async function (
  req: NextApiRequest,
  res: NextApiResponse,
  session: Session
--- a/lib/api/controllers/collections/postCollection.ts
+++ b/lib/api/controllers/collections/postCollection.ts
@ -2,7 +2,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { prisma } from "@/lib/api/db";
 import { Session } from "next-auth";

-export default async function handler(
+export default async function (
  req: NextApiRequest,
  res: NextApiResponse,
  session: Session
--- a/lib/api/controllers/links/postLink.ts
+++ b/lib/api/controllers/links/postLink.ts
@ -0,0 +1,106 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { prisma } from "@/lib/api/db";
+import { Session } from "next-auth";
+import { Link } from "@prisma/client";
+
+interface LinkObject {
+  id: number;
+  name: string;
+  url: string;
+  tags: string[];
+  collectionId: {
+    id: string | number;
+    isNew: boolean | undefined;
+  };
+}
+
+export default async function (
+  req: NextApiRequest,
+  res: NextApiResponse,
+  session: Session
+) {
+  if (!session?.user?.email) {
+    return res.status(401).json({ response: "You must be logged in." });
+  }
+
+  const email: string = session.user.email;
+  const link: LinkObject = req?.body;
+
+  if (!link.name) {
+    return res
+      .status(401)
+      .json({ response: "Please enter a valid name for the link." });
+  }
+
+  if (link.collectionId.isNew) {
+    const collectionId = link.collectionId.id as string;
+
+    const findCollection = await prisma.user.findFirst({
+      where: {
+        email,
+      },
+      select: {
+        collections: {
+          where: {
+            name: collectionId,
+          },
+        },
+      },
+    });
+
+    const checkIfCollectionExists = findCollection?.collections[0];
+
+    if (checkIfCollectionExists) {
+      return res.status(400).json({ response: "Collection already exists." });
+    }
+
+    const createCollection = await prisma.collection.create({
+      data: {
+        owner: {
+          connect: {
+            id: session.user.id,
+          },
+        },
+        name: collectionId,
+      },
+    });
+
+    link.collectionId.id = createCollection.id;
+  }
+
+  const collectionId = link.collectionId.id as number;
+
+  const createLink: Link = await prisma.link.create({
+    data: {
+      name: link.name,
+      url: "https://www.example.com",
+      collection: {
+        connect: {
+          id: collectionId,
+        },
+      },
+      tags: {
+        connectOrCreate: link.tags.map((name) => ({
+          where: {
+            name_collectionId: {
+              name,
+              collectionId,
+            },
+          },
+          create: {
+            name,
+            collections: {
+              connect: {
+                id: collectionId,
+              },
+            },
+          },
+        })),
+      },
+    },
+  });
+
+  return res.status(200).json({
+    response: createLink,
+  });
+}
--- a/lib/api/controllers/tags/getTags.ts
+++ b/lib/api/controllers/tags/getTags.ts
@ -0,0 +1,32 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { prisma } from "@/lib/api/db";
+import { Session } from "next-auth";
+
+export default async function (
+  req: NextApiRequest,
+  res: NextApiResponse,
+  session: Session
+) {
+  const tags = await prisma.tag.findMany({
+    where: {
+      collections: {
+        OR: [
+          {
+            ownerId: session?.user.id,
+          },
+          {
+            members: {
+              some: {
+                userId: session?.user.id,
+              },
+            },
+          },
+        ],
+      },
+    },
+  });
+
+  return res.status(200).json({
+    response: tags || [],
+  });
+}
--- a/lib/client/getInitialData.ts
+++ b/lib/client/getInitialData.ts
@ -1,14 +1,17 @@
 import useCollectionSlice from "@/store/collection";
 import { useEffect } from "react";
 import { useSession } from "next-auth/react";
+import useTagSlice from "@/store/tags";

-export default function getInitialData() {
+export default function () {
  const { status } = useSession();
  const { setCollections } = useCollectionSlice();
+  const { setTags } = useTagSlice();

  useEffect(() => {
    if (status === "authenticated") {
      setCollections();
+      setTags();
    }
  }, [status]);
 }
--- a/package.json
+++ b/package.json
@ -29,6 +29,7 @@
    "next-auth": "^4.19.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
+    "react-select": "^5.7.0",
    "typescript": "4.9.4",
    "zustand": "^4.3.3"
  },
--- a/pages/api/auth/register.ts
+++ b/pages/api/auth/register.ts
@ -12,7 +12,7 @@ interface User {
  password: string;
 }

-export default async function handler(
+export default async function (
  req: NextApiRequest,
  res: NextApiResponse<Data>
 ) {
--- a/pages/api/routes/collections/index.ts
+++ b/pages/api/routes/collections/index.ts
@ -2,13 +2,13 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "pages/api/auth/[...nextauth]";
 import getCollections from "@/lib/api/controllers/collections/getCollections";
-import postCollections from "@/lib/api/controllers/collections/postCollection";
+import postCollection from "@/lib/api/controllers/collections/postCollection";

 type Data = {
  response: object[] | string;
 };

-export default async function handler(
+export default async function (
  req: NextApiRequest,
  res: NextApiResponse<Data>
 ) {
@ -20,5 +20,5 @@ export default async function handler(

  if (req.method === "GET") return await getCollections(req, res, session);

-  if (req.method === "POST") return await postCollections(req, res, session);
+  if (req.method === "POST") return await postCollection(req, res, session);
 }
--- a/pages/api/routes/links/index.ts
+++ b/pages/api/routes/links/index.ts
@ -0,0 +1,24 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "pages/api/auth/[...nextauth]";
+import postLink from "@/lib/api/controllers/links/postLink";
+
+type Data = {
+  response: object[] | string;
+};
+
+export default async function (
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  const session = await getServerSession(req, res, authOptions);
+
+  if (!session?.user?.email) {
+    return res.status(401).json({ response: "You must be logged in." });
+  }
+
+  // Check if user is unauthorized to the collection (If isn't owner or doesn't has the required permission...)
+  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
+  if (req.method === "POST") return await postLink(req, res, session);
+}
--- a/pages/api/routes/tags/index.ts
+++ b/pages/api/routes/tags/index.ts
@ -0,0 +1,21 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "pages/api/auth/[...nextauth]";
+import getTags from "@/lib/api/controllers/tags/getTags";
+
+type Data = {
+  response: object[] | string;
+};
+
+export default async function (
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  const session = await getServerSession(req, res, authOptions);
+
+  if (!session?.user?.email) {
+    return res.status(401).json({ response: "You must be logged in." });
+  }
+
+  if (req.method === "GET") return await getTags(req, res, session);
+}
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@ -0,0 +1,11 @@
+import { useRouter } from "next/router";
+
+export default function () {
+  const router = useRouter();
+
+  const collectionId = Number(router.query.id);
+
+  console.log(collectionId);
+
+  return <div>{"HI"}</div>;
+}
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@ -0,0 +1,20 @@
+import { useSession } from "next-auth/react";
+import useCollectionSlice from "@/store/collection";
+
+import CollectionCard from "@/components/CollectionCard";
+
+export default function () {
+  const { collections } = useCollectionSlice();
+  const { data: session, status } = useSession();
+
+  const user = session?.user;
+
+  return (
+    // ml-80
+    <div className="flex flex-wrap p-5">
+      {collections.map((e, i) => {
+        return <CollectionCard key={i} collection={e} />;
+      })}
+    </div>
+  );
+}
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@ -1,15 +0,0 @@
-import { useSession } from "next-auth/react";
-import CollectionCards from "@/components/CollectionCards";
-
-export default function Dashboard() {
-  const { data: session, status } = useSession();
-
-  const user = session?.user;
-
-  return (
-    // ml-80
-    <div className="p-5">
-      <CollectionCards />
-    </div>
-  );
-}
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -5,6 +5,6 @@ export default function Home() {
  const router = useRouter();

  useEffect(() => {
-    router.push("/dashboard");
+    router.push("/collections");
  }, []);
 }
--- a/pages/login.tsx
+++ b/pages/login.tsx
@ -7,7 +7,7 @@ interface FormData {
  password: string;
 }

-export default function Login() {
+export default function () {
  const [form, setForm] = useState<FormData>({
    email: "",
    password: "",
--- a/pages/register.tsx
+++ b/pages/register.tsx
@ -8,7 +8,7 @@ interface FormData {
  password: string;
 }

-export default function Register() {
+export default function () {
  const router = useRouter();

  const [form, setForm] = useState<FormData>({
--- a/prisma/migrations/20230213224230_/migration.sql
+++ b/prisma/migrations/20230213224230_/migration.sql
@ -1,57 +0,0 @@
-- CreateTable
-CREATE TABLE "User" (
-    "id" SERIAL NOT NULL,
-    "name" TEXT NOT NULL,
-    "email" TEXT NOT NULL,
-    "password" TEXT NOT NULL,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-
-    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
-);
-
-- CreateTable
-CREATE TABLE "Collection" (
-    "id" SERIAL NOT NULL,
-    "name" TEXT NOT NULL,
-    "ownerId" INTEGER NOT NULL,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-
-    CONSTRAINT "Collection_pkey" PRIMARY KEY ("id")
-);
-
-- CreateTable
-CREATE TABLE "UserAndCollection" (
-    "userId" INTEGER NOT NULL,
-    "collectionId" INTEGER NOT NULL,
-    "canCreate" BOOLEAN NOT NULL,
-    "canRead" BOOLEAN NOT NULL,
-    "canUpdate" BOOLEAN NOT NULL,
-    "canDelete" BOOLEAN NOT NULL,
-
-    CONSTRAINT "UserAndCollection_pkey" PRIMARY KEY ("userId","collectionId")
-);
-
-- CreateTable
-CREATE TABLE "Link" (
-    "id" SERIAL NOT NULL,
-    "name" TEXT NOT NULL,
-    "url" TEXT NOT NULL,
-    "collectionId" INTEGER NOT NULL,
-
-    CONSTRAINT "Link_pkey" PRIMARY KEY ("id")
-);
-
-- CreateIndex
-CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
-
-- AddForeignKey
-ALTER TABLE "Collection" ADD CONSTRAINT "Collection_ownerId_fkey" FOREIGN KEY ("ownerId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
-
-- AddForeignKey
-ALTER TABLE "UserAndCollection" ADD CONSTRAINT "UserAndCollection_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
-
-- AddForeignKey
-ALTER TABLE "UserAndCollection" ADD CONSTRAINT "UserAndCollection_collectionId_fkey" FOREIGN KEY ("collectionId") REFERENCES "Collection"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
-
-- AddForeignKey
-ALTER TABLE "Link" ADD CONSTRAINT "Link_collectionId_fkey" FOREIGN KEY ("collectionId") REFERENCES "Collection"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
--- a/prisma/migrations/20230224113421_/migration.sql
+++ b/prisma/migrations/20230224113421_/migration.sql
@ -0,0 +1,90 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "password" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Collection" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "ownerId" INTEGER NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Collection_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "UsersAndCollections" (
+    "userId" INTEGER NOT NULL,
+    "collectionId" INTEGER NOT NULL,
+    "canCreate" BOOLEAN NOT NULL,
+    "canRead" BOOLEAN NOT NULL,
+    "canUpdate" BOOLEAN NOT NULL,
+    "canDelete" BOOLEAN NOT NULL,
+
+    CONSTRAINT "UsersAndCollections_pkey" PRIMARY KEY ("userId","collectionId")
+);
+
+-- CreateTable
+CREATE TABLE "Link" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "url" TEXT NOT NULL,
+    "collectionId" INTEGER NOT NULL,
+
+    CONSTRAINT "Link_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Tag" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "collectionId" INTEGER NOT NULL,
+
+    CONSTRAINT "Tag_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "_LinkToTag" (
+    "A" INTEGER NOT NULL,
+    "B" INTEGER NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Tag_name_collectionId_key" ON "Tag"("name", "collectionId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "_LinkToTag_AB_unique" ON "_LinkToTag"("A", "B");
+
+-- CreateIndex
+CREATE INDEX "_LinkToTag_B_index" ON "_LinkToTag"("B");
+
+-- AddForeignKey
+ALTER TABLE "Collection" ADD CONSTRAINT "Collection_ownerId_fkey" FOREIGN KEY ("ownerId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "UsersAndCollections" ADD CONSTRAINT "UsersAndCollections_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "UsersAndCollections" ADD CONSTRAINT "UsersAndCollections_collectionId_fkey" FOREIGN KEY ("collectionId") REFERENCES "Collection"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Link" ADD CONSTRAINT "Link_collectionId_fkey" FOREIGN KEY ("collectionId") REFERENCES "Collection"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Tag" ADD CONSTRAINT "Tag_collectionId_fkey" FOREIGN KEY ("collectionId") REFERENCES "Collection"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_LinkToTag" ADD CONSTRAINT "_LinkToTag_A_fkey" FOREIGN KEY ("A") REFERENCES "Link"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_LinkToTag" ADD CONSTRAINT "_LinkToTag_B_fkey" FOREIGN KEY ("B") REFERENCES "Tag"("id") ON DELETE CASCADE ON UPDATE CASCADE;
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@ -1,6 +1,3 @@
-// This is your Prisma schema file,
-// learn more about it in the docs: https://pris.ly/d/prisma-schema
-
 generator client {
  provider = "prisma-client-js"
 }
@ -16,7 +13,7 @@ model User {
  email String @unique
  password String
  collections Collection[]
-  collectionsJoined UserAndCollection[]
+  collectionsJoined UsersAndCollections[]
  createdAt DateTime @default(now())
 }

@ -25,12 +22,13 @@ model Collection {
  name String
  owner User @relation(fields: [ownerId], references: [id])
  ownerId Int
-  members UserAndCollection[]
+  members UsersAndCollections[]
  links Link[]
+  tags Tag[]
  createdAt DateTime @default(now())
 }

-model UserAndCollection {
+model UsersAndCollections {
  user User @relation(fields: [userId], references: [id])
  userId Int

@ -51,4 +49,15 @@ model Link {
  url String
  collection Collection @relation(fields: [collectionId], references: [id])
  collectionId Int
+  tags Tag[]
+}
+
+model Tag {
+  id Int @id @default(autoincrement())
+  name String
+  links Link[]
+  collections Collection @relation(fields: [collectionId], references: [id])
+  collectionId Int
+
+  @@unique([name, collectionId])
 }
--- a/store/collection.ts
+++ b/store/collection.ts
@ -41,21 +41,6 @@ const useCollectionSlice = create<CollectionSlice>()((set) => ({
      ),
    })),
  removeCollection: (collectionId) => {
-    // await fetch("/api/routes/collections/postCollection", {
-    //   body: JSON.stringify({ collectionName }),
-    //   headers: {
-    //     "Content-Type": "application/json",
-    //   },
-    //   method: "POST",
-    // })
-    //   .then((res) => res.json())
-    //   .then((data) => {
-    //     console.log(data);
-    //     set((state) => ({
-    //       collections: [...state.collections, data.response],
-    //     }));
-    //   });
-
    set((state) => ({
      collections: state.collections.filter((c) => c.id !== collectionId),
    }));
--- a/store/tags.ts
+++ b/store/tags.ts
@ -0,0 +1,20 @@
+import { create } from "zustand";
+import { Tag } from "@prisma/client";
+
+type TagSlice = {
+  tags: Tag[];
+  setTags: () => void;
+};
+
+const useTagSlice = create<TagSlice>()((set) => ({
+  tags: [],
+  setTags: async () => {
+    const response = await fetch("/api/routes/tags");
+
+    const data = await response.json();
+
+    if (response.ok) set({ tags: data.response });
+  },
+}));
+
+export default useTagSlice;
--- a/yarn.lock
+++ b/yarn.lock
@ -2,6 +2,46 @@
 # yarn lockfile v1


+"@babel/code-frame@^7.0.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
+  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
+"@babel/helper-module-imports@^7.16.7":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
+  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-string-parser@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
+  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
+
+"@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
+  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
+
+"@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
+  integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7":
  version "7.20.13"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b"
@ -9,6 +49,103 @@
  dependencies:
    regenerator-runtime "^0.13.11"

+"@babel/types@^7.18.6":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.0.tgz#1da00d89c2f18b226c9207d96edbeb79316a1819"
+  integrity sha512-uR7NWq2VNFnDi7EYqiRz2Jv/VQIu38tu64Zy8TX2nQFQ6etJ9V/Rr2msW8BS132mum2rL645qpDrLtAJtVpuow==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
+"@emotion/babel-plugin@^11.10.6":
+  version "11.10.6"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz#a68ee4b019d661d6f37dec4b8903255766925ead"
+  integrity sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/serialize" "^1.1.1"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.1.3"
+
+"@emotion/cache@^11.10.5", "@emotion/cache@^11.4.0":
+  version "11.10.5"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.5.tgz#c142da9351f94e47527ed458f7bbbbe40bb13c12"
+  integrity sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/sheet" "^1.2.1"
+    "@emotion/utils" "^1.2.0"
+    "@emotion/weak-memoize" "^0.3.0"
+    stylis "4.1.3"
+
+"@emotion/hash@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
+  integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
+
+"@emotion/memoize@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
+  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@emotion/react@^11.8.1":
+  version "11.10.6"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.6.tgz#dbe5e650ab0f3b1d2e592e6ab1e006e75fd9ac11"
+  integrity sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.10.6"
+    "@emotion/cache" "^11.10.5"
+    "@emotion/serialize" "^1.1.1"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
+    "@emotion/utils" "^1.2.0"
+    "@emotion/weak-memoize" "^0.3.0"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0"
+  integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==
+  dependencies:
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/unitless" "^0.8.0"
+    "@emotion/utils" "^1.2.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c"
+  integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==
+
+"@emotion/unitless@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
+  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df"
+  integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==
+
+"@emotion/utils@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561"
+  integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==
+
+"@emotion/weak-memoize@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb"
+  integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==
+
 "@eslint/eslintrc@^1.4.1":
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.4.1.tgz#af58772019a2d271b7e2d4c23ff4ddcba3ccfb3e"
@ -24,6 +161,18 @@
    minimatch "^3.1.2"
    strip-json-comments "^3.1.1"

+"@floating-ui/core@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.1.tgz#074182a1d277f94569c50a6b456e62585d463c8e"
+  integrity sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg==
+
+"@floating-ui/dom@^1.0.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.1.tgz#8f93906e1a3b9f606ce78afb058e874344dcbe07"
+  integrity sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==
+  dependencies:
+    "@floating-ui/core" "^1.2.1"
+
 "@fortawesome/fontawesome-common-types@6.3.0":
  version "6.3.0"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz#51f734e64511dbc3674cd347044d02f4dd26e86b"
@ -262,6 +411,11 @@
  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.18.tgz#8dfb97f0da23c2293e554c5a50d61ef134d7697f"
  integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==

+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
 "@types/prop-types@*":
  version "15.7.5"
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
@ -274,6 +428,13 @@
  dependencies:
    "@types/react" "*"

+"@types/react-transition-group@^4.4.0":
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
+  integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@18.0.27":
  version "18.0.27"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.27.tgz#d9425abe187a00f8a5ec182b010d4fd9da703b71"
@ -388,6 +549,13 @@ ansi-regex@^5.0.1:
  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==

+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
 ansi-styles@^4.1.0:
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
@ -514,6 +682,15 @@ axobject-query@^3.1.1:
  dependencies:
    deep-equal "^2.0.5"

+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
 balanced-match@^1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@ -580,6 +757,15 @@ caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.300014
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz#a8d11f6a814c75c9ce9d851dc53eb1d1dfbcd657"
  integrity sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw==

+chalk@^2.0.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
 chalk@^4.0.0:
  version "4.1.2"
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@ -613,6 +799,13 @@ client-only@0.0.1:
  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==

+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
 color-convert@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@ -620,6 +813,11 @@ color-convert@^2.0.1:
  dependencies:
    color-name "~1.1.4"

+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+
 color-name@^1.1.4, color-name@~1.1.4:
  version "1.1.4"
  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
@ -640,11 +838,27 @@ console-control-strings@^1.0.0, console-control-strings@^1.1.0:
  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
  integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==

+convert-source-map@^1.5.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
 cookie@^0.5.0:
  version "0.5.0"
  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==

+cosmiconfig@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 cross-spawn@^7.0.2, cross-spawn@^7.0.3:
  version "7.0.3"
  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@ -779,6 +993,14 @@ doctrine@^3.0.0:
  dependencies:
    esutils "^2.0.2"

+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 electron-to-chromium@^1.4.251:
  version "1.4.284"
  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz#61046d1e4cab3a25238f6bf7413795270f125592"
@ -802,6 +1024,13 @@ enhanced-resolve@^5.10.0:
    graceful-fs "^4.2.4"
    tapable "^2.2.0"

+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
 es-abstract@^1.19.0, es-abstract@^1.20.4:
  version "1.21.1"
  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.21.1.tgz#e6105a099967c08377830a0c9cb589d570dd86c6"
@ -886,6 +1115,11 @@ escalade@^3.1.1:
  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==

+escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
+
 escape-string-regexp@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
@ -1154,6 +1388,11 @@ fill-range@^7.0.1:
  dependencies:
    to-regex-range "^5.0.1"

+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
@ -1368,6 +1607,11 @@ has-bigints@^1.0.1, has-bigints@^1.0.2:
  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==

+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
+
 has-flag@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
@ -1409,6 +1653,13 @@ has@^1.0.3:
  dependencies:
    function-bind "^1.1.1"

+hoist-non-react-statics@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 https-proxy-agent@^5.0.0:
  version "5.0.1"
  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
@ -1474,6 +1725,11 @@ is-array-buffer@^3.0.1:
    get-intrinsic "^1.1.3"
    is-typed-array "^1.1.10"

+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
 is-bigint@^1.0.1:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@ -1656,7 +1912,7 @@ js-sdsl@^4.1.4:
  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.3.0.tgz#aeefe32a451f7af88425b11fdb5f58c90ae1d711"
  integrity sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==

-"js-tokens@^3.0.0 || ^4.0.0":
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
@ -1668,6 +1924,11 @@ js-yaml@^4.1.0:
  dependencies:
    argparse "^2.0.1"

+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
 json-schema-traverse@^0.4.1:
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@ -1718,6 +1979,11 @@ lilconfig@^2.0.5, lilconfig@^2.0.6:
  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
  integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==

+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
 locate-path@^6.0.0:
  version "6.0.0"
  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
@ -1751,6 +2017,11 @@ make-dir@^3.1.0:
  dependencies:
    semver "^6.0.0"

+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
 merge2@^1.3.0, merge2@^1.4.1:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
@ -2052,6 +2323,16 @@ parent-module@^1.0.0:
  dependencies:
    callsites "^3.0.0"

+parse-json@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
 path-exists@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@ -2183,7 +2464,7 @@ prisma@^4.9.0:
  dependencies:
    "@prisma/engines" "4.9.0"

-prop-types@^15.8.1:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
  version "15.8.1"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -2215,11 +2496,36 @@ react-dom@18.2.0:
    loose-envify "^1.1.0"
    scheduler "^0.23.0"

-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

+react-select@^5.7.0:
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.7.0.tgz#82921b38f1fcf1471a0b62304da01f2896cd8ce6"
+  integrity sha512-lJGiMxCa3cqnUr2Jjtg9YHsaytiZqeNOKeibv6WF5zbK/fPegZ1hg3y/9P1RZVLhqBTs0PfqQLKuAACednYGhQ==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.8.1"
+    "@floating-ui/dom" "^1.0.1"
+    "@types/react-transition-group" "^4.4.0"
+    memoize-one "^6.0.0"
+    prop-types "^15.6.0"
+    react-transition-group "^4.3.0"
+    use-isomorphic-layout-effect "^1.1.2"
+
+react-transition-group@^4.3.0:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@18.2.0:
  version "18.2.0"
  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@ -2274,7 +2580,7 @@ resolve-from@^4.0.0:
  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==

-resolve@^1.1.7, resolve@^1.22.1:
+resolve@^1.1.7, resolve@^1.19.0, resolve@^1.22.1:
  version "1.22.1"
  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
@ -2390,6 +2696,11 @@ source-map-js@^1.0.2:
  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==

+source-map@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+
 stop-iteration-iterator@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
@ -2469,6 +2780,18 @@ styled-jsx@5.1.1:
  dependencies:
    client-only "0.0.1"

+stylis@4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
+  integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
+
+supports-color@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
 supports-color@^7.1.0:
  version "7.2.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
@ -2548,6 +2871,11 @@ tiny-glob@^0.2.9:
    globalyzer "0.1.0"
    globrex "^0.1.2"

+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
+
 to-regex-range@^5.0.1:
  version "5.0.1"
  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@ -2638,6 +2966,11 @@ uri-js@^4.2.2:
  dependencies:
    punycode "^2.1.0"

+use-isomorphic-layout-effect@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
 use-sync-external-store@1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
@ -2733,7 +3066,7 @@ yallist@^4.0.0:
  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==

-yaml@^1.10.2:
+yaml@^1.10.0, yaml@^1.10.2:
  version "1.10.2"
  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==