fix: styling for tags search

app/admin/page.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { createClient } from "@/utils/supabase/client";
+import React, { useState, useEffect } from 'react'; 
+
+function PageComponent() {
+  const supabase = createClient();
+
+  const getData = async () => {
+  }
+
+  useEffect(() => {
+    getData();
+  }, []);
+  return (
+    
+    <div className="w-full text-white flex justify-center items-center animate-in">
+        <div className="w-2/3 rounded-md bg-primary p-12 mt-32">
+            Test
+        </div>
+    </div>
+  );
+}
+
+export default PageComponent;

app/gallery/admin/page.tsx

@@ -10,12 +10,16 @@ function PageComponent() {
 
     const supabase = createClient();
     const user = supabase.auth.getUser();
-    const [galleries, setGalleries] = useState([]);
+    const [tags, setTags] = useState([]);
     const [nsfwState, setNsfwState] = useState<boolean>(false);
     const [tagsState, setTagsState] = useState<string[]>([]);
     const [searchState, setSearchState] = useState<string>("");
+    const [galleries, setGalleries] = useState([]);
 
     const getData = async () => {
+        const tagsResponse = await fetch(`/api/galleries/tags`);
+        const tagsData = await tagsResponse.json();
+        setTags(tagsData);
         const galleriesResponse = await fetch(`/api/galleries?search=` + searchState + '&nsfw=' + nsfwState, {
             method: 'POST',
             headers: {
@@ -39,13 +43,47 @@ function PageComponent() {
     
 
     return (
-        <div className="w-full text-white flex justify-center items-center animate-in">
+        <div className="w-full h-1/2 text-white flex justify-center items-center animate-in">
-            <div className="w-1/2 rounded-md bg-primary p-12 mt-32">
+        <div className="w-full lg:w-1/3 rounded-md bg-primary p-12 m-1 mt-32">
+            <div className="w-full flex">
+                <input type="text" className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white" placeholder="Tag Name" />
+                <button  className="ml-2 w-1/2 h-10 text-center bg-success hover:bg-success-light text-white font-bold rounded flex items-center justify-center">
+                    Create
+                </button>
+            </div>
+            <div className="w-full flex">
+                <input type="text" className="mb-8 mr-2 rounded-md bg-secondary p-2 w-full text-white" placeholder="Search all tags by name" />
+            </div>
+            <div className="w-full h-96 overflow-y-scroll no-scrollbar">
+            <table className="w-full">
+                <thead>
+                    <tr>
+                        <th className="px-4 py-2" style={{ width: '90%' }}></th>
+                        <th className="px-4 py-2"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {tags.map((item:any) => (
+                        <tr key={item.name} className="animate-in">
+                            <td className="px-4 py-2">{item.name}</td>
+                            <td className="px-4 py-2">
+                                <button  className="bg-error hover:bg-error-light text-white font-bold py-2 px-4 rounded float-right">
+                                    Delete
+                                </button>
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+            </div>
+        </div>
+        <div className="w-full lg:w-1/2 rounded-md bg-primary p-12 m-1 mt-32">
             <div className="w-full flex">
                 <SearchInput placeholderTags={[
                     { value: "tags", label: "❗️ click here to add tags to search" }
                 ]} nsfwButtonEnabled={true} searchChanged={(search) => { setSearchState(search) }} nsfwChanged={(nsfw) => { setNsfwState(nsfw) }} tagsChanged={(tags) => { setTagsState(tags) }} />
-                    <a href="/gallery/admin/create" className="ml-2 text-center bg-success hover:bg-success-light text-white w-1/6 font-bold rounded flex items-center justify-center">
+            
+                <a href="/gallery/admin/create" className="ml-2 max-h-14 text-center bg-success hover:bg-success-light text-white w-1/6 font-bold rounded flex items-center justify-center">
                     Create
                 </a>
             </div>

app/gallery/page.tsx

@@ -24,7 +24,7 @@ function PageComponent() {
 
   return (
     <div className="w-full">
-      <div className="w-2/3">
+      <div className="w-2/4">
         <Search gallerySelected={(gallery:string)=>{setSelectedGallery(gallery)}}/>
       </div>
 

components/neroshitron/navigation_bar.tsx

@@ -50,6 +50,12 @@ console.log(currentPage)
             >
               <span className="hidden lg:block">Gallery Admin</span>
             </Link>
+            <Link
+              href="/admin/"
+              className={`py-2 px-3 w-38  text-center flex rounded-md lg:block hidden no-underline ${currentPage!="gallery" ? 'bg-secondary hover:bg-secondary-light' : 'bg-secondary hover:bg-secondary-light'}`}
+            >
+              <span className="hidden lg:block">System Settings</span>
+            </Link>
 
             <Link
               href="/gallery"

components/neroshitron/search_input.tsx

@@ -63,7 +63,7 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
   useEffect(() => {
   }, []);
 
-  const tagOptions = tags.map((tag: { name: string; }) => ({ value: tag.name, label: "🏷️ "+tag.name }));
+  const tagOptions = tags.map((tag: { name: string; }) => ({ value: tag.name, label: tag.name }));
   return (
     <>
       <div className={` ${scrollPosition>0 ?? 'opacity-30'} opacity 0 relative w-full flex flex-col items-center justify-center z-10`}>
@@ -101,7 +101,26 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
                       }
                     }}
                     classNames={{
+                      
+                      menu: "bg-secondary-dark text-white pb-4 rounded",
+                      searchBox: "rounded-md bg-secondary w-1/2 text-white w-full mt-2 p-2 mb-2 animate-in",
+                      searchIcon: "hidden",
+                      tagItem: (value) => "bg-primary-light rounded-md pl-2 p-1 m-1 flex",
+                      tagItemText: "text-white",
+                      closeIcon: "text-white"
                     }}
+
+                    formatOptionLabel={data => (
+                      <li
+                          className={`animate-in block transition rounded duration-200 px-2 py-2 cursor-pointer select-none truncate pt-2 ${
+                              !data.isSelected
+                                  ? `text-white bg-primary hover:bg-primary-light`
+                                  : `bg-primary-light text-white`
+                          }`}
+                      >
+                          {data.label}
+                      </li>
+                  )}
                     value={selectedTagsInput} 
                     primaryColor={"indigo"} />