Tag Selection (using react-select library)

src/componets/AddModal.js

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { nanoid } from 'nanoid'
 import '../styles/Modal.css';
 import config from '../config.json';
+import TagSelection from './TagSelection';
 
 const AddModal = ({onExit, reFetch}) => {
   const [name, setName] = useState('');
@@ -79,13 +80,14 @@ const AddModal = ({onExit, reFetch}) => {
     <div className='overlay' onClick={abort}>
       <div className='box'>
         <div className='modal-content'>
-          <h2>Add Bookmark</h2>
+          <h2>New Bookmark</h2>
           <h3>Name:</h3>
           <input onChange={SetName} className="modal-input" type="search" placeholder="e.g. Example Tutorial"/>
           <h3>Link:</h3>
           <input onChange={SetLink} className="modal-input" type="search" placeholder="e.g. https://example.com/"/>
-          <h3>Tag:</h3>
-          <input onChange={SetTag} className="modal-input" type="search" placeholder="e.g. Tutorials (Seperate with spaces)"/>
+          <h3>Tags:</h3>
+          <TagSelection />
+          {/* <input onChange={SetTag} className="modal-input" type="search" placeholder="e.g. Tutorials (Seperate with spaces)"/> */}
           <button onClick={submitBookmark} className="upload-btn">Upload &#xf093;</button>
           <button className="cancel-btn">Cancel</button>
         </div>

src/componets/TagSelection.js

@@ -0,0 +1,63 @@
+import { useState } from "react";
+import CreatableSelect from "react-select/creatable";
+
+const options = [
+  { value: "chocolate", label: "Chocolate" },
+  { value: "strawberry", label: "Strawberry" },
+  { value: "vanilla", label: "Vanilla" }
+];
+
+const customStyles = {
+  container: (provided) => ({
+    ...provided,
+    marginLeft: '20%',
+    marginRight: '20%',
+  }),
+
+  placeholder: (provided) => ({
+    ...provided,
+    color: '#a9a9a9',
+  }),
+
+  indicatorSeparator: (provided) => ({
+    ...provided,
+    display: 'none',
+  }),
+  
+  menu: (provided) => ({
+    ...provided,
+    padding: '5px',
+    borderRadius: '10px',
+    opacity: '90%',
+    color: 'gray',
+    background: '#273949',
+    boxShadow: 'rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset',
+  }),
+
+  input: (provided) => ({
+    ...provided,
+    color: 'white',
+}),
+
+  control: (provided) => ({
+    ...provided,
+    background: '#273949',
+    border: 'none',
+    borderRadius: '10px',
+    boxShadow: 'rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset',
+  }),
+}
+
+export default function TagSelection() {
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  return (
+    <CreatableSelect
+        styles={customStyles}
+        isMulti
+        defaultValue={selectedOption}
+        onChange={setSelectedOption}
+        options={options}
+    />
+  );
+}