fix: search styling

components/neroshitron/search_input.tsx

@@ -1,7 +1,9 @@
 "use client;"
 import React, { useState, useEffect, useRef,forwardRef } from 'react';
 import TagSelector from '../neroshitron/tag_selector';
-import Select from 'react-select';
+import Select from "react-tailwindcss-select";
+import { SelectValue } from 'react-tailwindcss-select/dist/components/type';
+import { Option } from 'react-tailwindcss-select/dist/components/type';
 
 interface SearchInputProps {
   tagsChanged: (tags: string[]) => void;
@@ -11,24 +13,10 @@ interface SearchInputProps {
 
 const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged}: SearchInputProps) => {
 
-  const AutocompleteDropdown = ({ tags }: { tags: any[] }) => {
-    const options = tags.map((tag: { name: string; }) => ({ value: tag.name, label: tag.name }));
-    return (
-      <div className="w-full max-w-xs mx-auto">
-        <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" htmlFor={"tags"}>
-        
-        </label>
-        <Select 
-          className="text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-          id={"tags"}
-          options={options}
-        />
-      </div>
-    );
-  };
   const [tagSearch, setTagSearch] = useState<string>('');
   const [nsfw, setNsfw] = useState<boolean>(false);
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [selectedTagsInput, setSelectedTagsInput] = useState<Option[]>([]);
   const [selectingTags, setSelectingTags] = useState<boolean>(false);
   const tagSelectorRef = React.useRef(null);
   const [tags, setTags] = useState<any[]>([]);
@@ -39,6 +27,9 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged}: SearchInputProp
     setTags(tagsData);
   }
 
+
+
+
   const updateTags = (newTags: string[]) => {
     setSelectedTags(newTags)
   }
@@ -86,10 +77,23 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged}: SearchInputProp
             )
             :(       
               <>
-              <Select isMulti autoFocus options={tagOptions} onChange={ (newValue) =>{
-                if(newValue){
-                  setSelectedTags(newValue.map((option: { value: string }) => option.value));
-                }}}  placeholder="Start typing to search tags..." className='w-full' />
+              <Select isMultiple isSearchable isClearable options={tagOptions} placeholder="Start typing to search tags..." 
+              
+              onChange={(value: SelectValue | SelectValue[] | null) => {
+                if (value === null) {
+                      setSelectedTags([]);
+                      setSelectedTagsInput([]);
+                }
+                    if (Array.isArray(value)) {
+                      setSelectedTags(value.map((option: { value: string; }) => option.value));
+                      setSelectedTagsInput(value as Option[])
+                    } else if (value) {
+                      setSelectedTags([value.value]);
+                      setSelectedTagsInput([value])
+                    }
+                  } }
+              
+              value={selectedTagsInput} primaryColor={'neroshi-blue'}/>
               <span className="flex items-center rounded rounded-l-none border-0 px-3 font-bold text-grey-100">
               {/* <div className="relative">
                 <button key="tags" data-tip={selectedTags.join(',')} onClick={()=>{openTags()}} type="button" className={`bg-neroshi-blue-900 hover:bg-neroshi-blue-800 text-lg text-white font-bold py-3 px-6 rounded ${selectedTags.length == 0 ? 'animate-pulse animate-infinite animate-ease-out' : 'animate-in'}`}>
@@ -107,7 +111,7 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged}: SearchInputProp
                 <button 
                 onClick={()=>{ setNsfw(!nsfw) }} 
                 type="button" 
-                className={`animate-in text-sm w-28 text-lg text-white font-bold py-3 px-6 rounded ml-2 ${nsfw ? "bg-pink-900 hover:bg-pink-800":"bg-green-900 hover:bg-green-800"}`}
+                className={`animate-in text-sm text-white font-bold py-3 px-6 rounded ml-2 ${nsfw ? "bg-pink-900 hover:bg-pink-800":"bg-green-900 hover:bg-green-800"}`}
                 
                 >
                   {nsfw ? "NSFW" : "SFW"}

package-lock.json

@@ -24,6 +24,7 @@
         "react-masonry-css": "^1.0.16",
         "react-responsive-masonry": "^2.2.0",
         "react-select": "^5.8.0",
+        "react-tailwindcss-select": "^1.8.5",
         "sharp": "^0.33.4",
         "simplex-noise": "^4.0.1",
         "tailwind-merge": "^2.3.0",
@@ -3118,6 +3119,14 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-tailwindcss-select": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/react-tailwindcss-select/-/react-tailwindcss-select-1.8.5.tgz",
+      "integrity": "sha512-x29IrLiqBT5FnkC9oFQReOr05tEOZHtDtZdha84nlSWcj3qD67yonKFHXIf69yc8ElFlKUxCEv0zCllN8jHBFA==",
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

package.json

@@ -25,6 +25,7 @@
     "react-masonry-css": "^1.0.16",
     "react-responsive-masonry": "^2.2.0",
     "react-select": "^5.8.0",
+    "react-tailwindcss-select": "^1.8.5",
     "sharp": "^0.33.4",
     "simplex-noise": "^4.0.1",
     "tailwind-merge": "^2.3.0",

tailwind.config.js

@@ -3,6 +3,8 @@ module.exports = {
   content: [
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/react-tailwindcss-select/dist/index.esm.js"
   ],
   theme: {
     extend: {