🔎 Adding universal Library search bar WIP

src/client/components/Navbar.tsx

@@ -1,7 +1,44 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { Link } from "react-router-dom";
+import Select, {
+  components,
+  DropdownIndicatorProps,
+  IndicatorSeparatorProps,
+} from "react-select";
 
 const Navbar: React.FunctionComponent = (props) => {
+  const DropdownIndicator = (
+    props: DropdownIndicatorProps<ColourOption, true>,
+  ) => {
+    return (
+      <components.DropdownIndicator {...props}>
+        <></>
+      </components.DropdownIndicator>
+    );
+  };
+
+  const IndicatorSeparator = ({
+    innerProps,
+  }: IndicatorSeparatorProps<ColourOption, true>) => {
+    return <></>;
+  };
+
+  const searchPlaceholder = (): ReactElement => (
+    <>
+      Search Library... <i className="fa-solid fa-magnifying-glass is-pulled-right mt-1"></i>
+    </>
+  );
+
+  const customStyles = {
+    control: () => ({
+      width: 250,
+      marginTop: 0,
+      border: "1px solid #CCC",
+      height: 40,
+      borderRadius: 8,
+    }),
+  };
+
   return (
     <nav className="navbar is-fixed-top">
       <div className="navbar-brand">
@@ -51,8 +88,24 @@ const Navbar: React.FunctionComponent = (props) => {
             Downloads
           </Link>
 
+          <Select
+            className="basic-single mt-2"
+            classNamePrefix="select"
+            styles={customStyles}
+            components={{ DropdownIndicator, IndicatorSeparator }}
+            placeholder={searchPlaceholder()}
+            // defaultValue={colourOptions[0]}
+            // isDisabled={isDisabled}
+            // isLoading={isLoading}
+            isClearable={true}
+            // isRtl={isRtl}
+            // isSearchable={isSearchable}
+            name="color"
+            // options={colourOptions}
+          />
+
           <Link to="/search" className="navbar-item">
-            Search
+            Search ComicVine
           </Link>
           <div className="navbar-item has-dropdown is-hoverable">
             <a