From e48d3ebafb9c3e93e83b870a57fb11d4d948fd51 Mon Sep 17 00:00:00 2001
From: Damien Ostler <damienostler1@outlook.com>
Date: Sun, 2 Jun 2024 19:26:12 -0400
Subject: [PATCH] fix;admin

---
 app/api/galleries/admin/route.ts        |  0
 app/gallery/admin/page.tsx              | 74 +++++++++++--------------
 components/neroshitron/search_input.tsx | 28 +++++-----
 3 files changed, 46 insertions(+), 56 deletions(-)
 create mode 100644 app/api/galleries/admin/route.ts

diff --git a/app/api/galleries/admin/route.ts b/app/api/galleries/admin/route.ts
new file mode 100644
index 0000000..e69de29
diff --git a/app/gallery/admin/page.tsx b/app/gallery/admin/page.tsx
index a1653a2..fddd9d0 100644
--- a/app/gallery/admin/page.tsx
+++ b/app/gallery/admin/page.tsx
@@ -67,30 +67,24 @@ function PageComponent() {
     ];
 
     return (
-        <div className="w-full h-1/2 text-white flex justify-center items-center animate-in">
+        <div className="w-full h-1/2 text-white lg:flex justify-center items-center animate-in">
         <div className="w-full lg:w-1/3 rounded-md bg-primary opacity-90 p-12 m-1 mt-32 shadow-lg backdrop-blur">
             <div className="w-full flex">
-                <input type="text" onChange={(e)=>{setNewTagName(e.target.value)}} className="hover:scale-95 focus:scale-95 mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white shadow-lg" placeholder="Tag Name" />
+                <input type="text" onChange={(e)=>{setNewTagName(e.target.value)}} className="hover:scale-105 focus:scale-95 mb-8 mr-2 rounded-md bg-info-bright p-2 w-1/2 text-white shadow-lg" placeholder="Tag Name" />
                 <button onClick={createTag} className="hover:scale-95 ml-2 shadow-lg w-1/2 h-10 text-center bg-success hover:bg-success-light text-white font-bold rounded flex items-center justify-center">
-                    Create
+                    Create New Tag
                 </button>
             </div>
             <div className="w-full flex">
-                <input type="text" value={tagSearch} onChange={(e)=>{setTagSearch(e.target.value)}} className="hover:scale-95 focus:scale-95 mb-8 shadow-lg mr-2 rounded-md bg-secondary p-2 w-full text-white" placeholder="Search all tags by name" />
+                <input type="text" value={tagSearch} onChange={(e)=>{setTagSearch(e.target.value)}} className="hover:scale-105 focus:scale-95 mb-8 shadow-lg mr-2 rounded-md bg-info-bright 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>
+            <table className="w-full bg-primary-light rounded">
                 <tbody>
                     {tags.filter((value,index,array)=>{
                         return value.name.toLowerCase().includes(tagSearch.toLowerCase());
                     }).map((item:any) => (
-                        <tr key={item.name} className="hover:bg-secondary-dark animate-in">
+                        <tr key={item.name} className="hover:bg-secondary-dark animate-in shadow">
                             <td className="px-4 py-2">{item.name}</td>
                             <td className="px-4 py-2">
                                 <button onClick={()=>{deleteTag(item.name)}}  className="hover:scale-95 bg-error shadow-lg hover:bg-error-light text-white font-bold py-2 px-4 rounded float-right">
@@ -106,44 +100,38 @@ function PageComponent() {
             </table>
             </div>
         </div>
-        <div className="w-full lg:w-1/2 rounded-md bg-primary opacity-90 backdrop-blur-lg p-12 m-1 mt-32 shadow-lg">
-            <div className="w-full flex">
+        <div className="w-full lg:w-1/2  h-96 rounded-md bg-primary opacity-90 backdrop-blur-lg p-12 m-1 mt-32 shadow-lg">
+            <div className="w-full flex pb-2">
                 <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="hover:scale-95 ml-2 shadow-lg 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 href="/gallery/admin/create" className="hover:scale-95 ml-2 p-2 shadow-lg h-10 text-center bg-success hover:bg-success-light text-white w-1/6 font-bold rounded flex items-center justify-center">
+                    + Gallery
                 </a>
             </div>
-            <table className="w-full">
-                <thead>
-                    <tr>
-                        <th className="px-4 py-2" style={{ width: '60%' }}></th>
-                        <th className="px-4 py-2" style={{width:"15%"}}></th>
-                        <th className="px-4 py-2"></th>
-                        <th className="px-4 py-2"></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {/* Replace this with your data mapping logic */}
-                    {galleries.map((item: { name: string, imageCount: number, tier: string }) => (
-                        <tr key={item.name} className="hover:bg-secondary-dark animate-in">
-                            <td className="px-4 py-2">{item.name}</td>
-                            <td className="px-4 py-2">{item.imageCount}</td>
-                            <td className="px-4 py-2">{item.tier.replace("Tier","")}</td>
-                            <td className="px-4 py-2">
-                                <button className="bg-secondary hover:scale-95 shadow-lg hover:bg-secondary-light text-white font-bold py-2 px-4 rounded float-right">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
-                                    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
-                                </svg>
+            <div className="w-full h-64 overflow-y-scroll no-scrollbar">
+                <table className="w-full mt-8 bg-primary-light rounded">
+                    <tbody>
+                        {/* Replace this with your data mapping logic */}
+                        {galleries.map((item: { name: string, imageCount: number, tier: string }) => (
+                            <tr key={item.name} className="hover:bg-secondary-dark shadow animate-in">
+                                <td className="px-4 py-2" style={{ width: '65%' }}>{item.name}</td>
+                                <td className="px-4 py-2">{item.imageCount}</td>
+                                <td className="px-4 py-2">{item.tier}</td>
+                                <td className="px-4 py-2">
+                                    <button className="bg-secondary hover:scale-95 shadow-lg hover:bg-secondary-light text-white font-bold py-2 px-4 rounded float-right">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+                                        <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
+                                    </svg>
 
-                                </button>
-                            </td>
-                        </tr>
-                    ))}
-                </tbody>
-            </table>
+                                    </button>
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
         </div>
         </div>
     );
diff --git a/components/neroshitron/search_input.tsx b/components/neroshitron/search_input.tsx
index d13e7de..8eb32fa 100644
--- a/components/neroshitron/search_input.tsx
+++ b/components/neroshitron/search_input.tsx
@@ -57,18 +57,18 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
   useEffect(() => {
     getData();
   }, []);
-  const [scrollPosition, setScrollPosition] = useState(0);
   const [color, setColor] = useState('black');
 
+
   useEffect(() => {
   }, []);
 
   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`}>
+      <div className={`  opacity 0 relative w-full flex flex-col items-center justify-center z-10`}>
         <div className="search-box mx-auto my-auto w-full">
-          <div className={`${scrollPosition>0 ?? 'opacity-30'} opacityflex flex-row`}>
+          <div className={`flex flex-row`}>
 
             {(selectingTags) ? (
               <>
@@ -84,6 +84,7 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
             )
               : (
                 <>
+                <div className="absolute w-full top-0">
                   <Select isMultiple isSearchable isClearable searchInputPlaceholder='Start typing to search tags...' 
                     options={tagOptions}
                     placeholder="Select tags for your search"
@@ -99,6 +100,9 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
                         setSelectedTags([value.value]);
                         setSelectedTagsInput([value])
                       }
+                    }}
+                    onSearchInputChange={(value) => {
+                      
                     }}
                     classNames={{
                       
@@ -111,21 +115,19 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
                     }}
 
                     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`
-                          }`}
+                      <li id={"tag-" + data.value}
+                        className={`animate-in block transition rounded duration-200 px-2 py-2 cursor-pointer select-none truncate pt-2 bg-primarytext-white hover:bg-primary-light
+                        }`}
                       >
-                          {data.label}
+                        {data.label}
                       </li>
-                  )}
+                    )}
                     value={selectedTagsInput} 
                     primaryColor={"indigo"} />
+                </div>
 
-                  {(nsfwButtonEnabled) ?? (
-                  <span className="flex items-center  border-0 font-bold text-grey-100">
+                    {(nsfwButtonEnabled==true) ?? (
+                    <span className="flex items-center  border-0 font-bold text-grey-100">
                     <button
                       onClick={() => { setNsfw(!nsfw) }}
                       type="button"