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

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"
+    />
+  );
+}

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
+    />
+  );
+}

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",
+    },
+  }),
+};

components/InputSelect/types.ts

@@ -0,0 +1,4 @@
+export interface Options {
+  value: string | number;
+  label: string;
+}