From 691292becc7e270534478fe2cb9b16ab4a489f2f Mon Sep 17 00:00:00 2001
From: Damien Ostler <damienostler1@outlook.com>
Date: Mon, 3 Jun 2024 22:21:19 -0400
Subject: [PATCH] fix:reactive pages

---
 app/gallery/admin/create/page.tsx | 12 +++----
 app/gallery/admin/page.tsx        | 15 +++++++--
 app/gallery/admin/view/page.tsx   | 55 ++++++++++++++++++-------------
 3 files changed, 50 insertions(+), 32 deletions(-)

diff --git a/app/gallery/admin/create/page.tsx b/app/gallery/admin/create/page.tsx
index b157ef7..a853578 100644
--- a/app/gallery/admin/create/page.tsx
+++ b/app/gallery/admin/create/page.tsx
@@ -76,8 +76,8 @@ function PageComponent() {
     };
 
     return (
-        <div className="w-full text-white flex justify-center items-center animate-in">
-            <div className="w-1/2 rounded-md bg-primary opacity-90 backdrop-blur-lg p-12 mt-32 shadow-lg">
+        <div className="w-full p-8 text-white flex justify-center items-center animate-in">
+            <div className="w-full lg:w-1/2 rounded-md bg-primary opacity-90 backdrop-blur-lg p-12 mt-32 shadow-lg">
                 <div className="w-full flex">
                     <input
                         type="text"
@@ -93,12 +93,12 @@ function PageComponent() {
                     </div>
                     <div className="w-1/4">
                         <button onClick={()=>{createGallery()}} className="w-full bg-success hover:bg-success-light text-white rounded-md p-2 ml-2 shadow-lg    ">
-                            Create Gallery
+                            <span></span>Create
                         </button>
                     </div>
                 </div>
-                <div className="w-full flex">
-                    <div className="w-1/2 mr-2">
+                <div className="w-full lg:flex">
+                    <div className="w-full lg:w-1/2 mr-2">
                         <SearchInput
                             placeholderTags={[
                                 { value: "tags", label: "❗️ click here to add tags" },
@@ -110,7 +110,7 @@ function PageComponent() {
                             tagsChanged={(tags) => { setTags(tags)  }}
                         />
                     </div>
-                    <div className="w-1/2">
+                    <div className="w-full lg:w-1/2 lg:pt-0 pt-4">
                         <select value={nsfw ? "NSFW" : "SFW"} className="mb-2 shadow-lg rounded-md bg-secondary p-2 w-full text-white" onChange={e=>{
                             setNsfw(e.target.value === "NSFW");
                         }}>
diff --git a/app/gallery/admin/page.tsx b/app/gallery/admin/page.tsx
index 5445572..34c3e9d 100644
--- a/app/gallery/admin/page.tsx
+++ b/app/gallery/admin/page.tsx
@@ -69,12 +69,17 @@ function PageComponent() {
     ];
 
     return (
-        <div className="w-full h-1/2 text-white lg:flex justify-center items-center animate-in">
+        <div className="w-full p-8 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 value={newTagName} type="text" onChange={(e)=>{setNewTagName(e.target.value)}} className="hover:scale-105 focus:scale-105 mb-8 mr-2 rounded-md bg-info-bright p-2 w-1/2 text-black 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 New Tag
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="lg:hidden size-6">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                    </svg>
+
+                    <span className="lg:hidden block">Tag</span>
+                    <span className="lg:block hidden">New Tag</span>
                 </button>
             </div>
             <div className="w-full flex">
@@ -112,7 +117,11 @@ function PageComponent() {
                     ]} nsfwButtonEnabled={false} searchChanged={(search) => { setSearchState(search) }} nsfwChanged={(nsfw) => { setNsfwState(nsfw) }} tagsChanged={(tags) => { setTagsState(tags) }} />
                 </div>
                 <a href="/gallery/admin/create" className="w-1/6 hover:scale-95 ml-2 p-2 shadow-lg h-10 text-center bg-success hover:bg-success-light text-white font-bold rounded flex items-center justify-center">
-                    New Gallery
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="xl:hidden size-6">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                    </svg>
+
+                    <span className="xl:block hidden">New Gallery</span>
                 </a>
             </div>
             <div className="w-full h-96 overflow-y-scroll no-scrollbar">
diff --git a/app/gallery/admin/view/page.tsx b/app/gallery/admin/view/page.tsx
index 24a3c18..ecd0bf7 100644
--- a/app/gallery/admin/view/page.tsx
+++ b/app/gallery/admin/view/page.tsx
@@ -122,9 +122,9 @@ function PageComponent() {
     }
 
     return (
-        <div  className="w-full h-screen text-white flex justify-center items-center animate-in">
+        <div className="w-full p-8 h-screen text-white flex justify-center items-center animate-in">
             <div className="w-full lg:w-1/2 rounded-md p-12 mt-14 ">
-                <div className="w-full flex pb-60">
+                <div className="w-full lg:pt-0 pt-32 flex pb-60 justify-center"> {/* Center the gallery thumbnail */}
                     {gallery != null && (
                         <GalleryThumbnail
                             key={"galleryThumbnail"+galleryName+"-"+tags.join("")}
@@ -146,31 +146,40 @@ function PageComponent() {
                         placeholder="Gallery Name"
                         value={galleryName}
                         onChange={(e) => setGalleryName(e.target.value)}
-                    />
-                    <div className="w-1/6">
-                        <button
-                            onClick={() => deleteGallery()}
-                            className="w-full bg-error hover:bg-error-light text-white rounded-md p-2"
-                        >
-                            Delete
-                        </button>
-                    </div>
-                    <div className="w-1/6">
-                        <button
-                            onClick={() => (window.location.href = "/gallery/admin")}
-                            className="w-full bg-error-dark hover:bg-error text-white rounded-md p-2 ml-2"
-                        >
-                            Back
-                        </button>
-                    </div>
+                    /><div className="w-1/6">
+                    <button
+                        onClick={() => deleteGallery()}
+                        className="text-center w-full bg-error hover:bg-error-light text-white rounded-md p-2 flex items-center justify-center"
+                    >
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} 
+                        stroke="currentColor" className="md:hidden size-6">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                        </svg>
+                  
+                        <span className="md:block hidden">Delete</span>
+                    </button>
+                </div>
+                <div className="w-1/6">
+                    <button
+                        onClick={() => (window.location.href = "/gallery/admin")}
+                        className="w-full bg-error-dark hover:bg-error text-white rounded-md p-2 ml-2 flex items-center justify-center"
+                    >
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} 
+                        stroke="currentColor" className="md:hidden size-6">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+                        </svg>
+                
+                        <span className="md:block hidden">Back</span>
+                    </button>
+                </div>
                     <div className="w-1/4">
                         <button onClick={()=>{updateGallery()}} className="w-full bg-success hover:bg-success-light text-white rounded-md p-2 ml-4">
-                            Save
+                            <span>Save</span>
                         </button>
                     </div>
                 </div>
-                <div className="w-full flex opacity-90 backdrop-blur-lg bg-primary  shadow-lg p-8 pt-0 rounded">
-                    <div className="w-1/2 mr-2">
+                <div className="w-full lg:flex opacity-90 backdrop-blur-lg bg-primary  shadow-lg p-8 pt-0 rounded">
+                    <div className="w-full lg:w-1/2 mr-8">
                         {gallery &&(
                         <SearchInput
                         placeholderTags={[
@@ -184,7 +193,7 @@ function PageComponent() {
                         />
                         )}
                     </div>
-                    <div className="w-1/2">
+                    <div className="w-full lg:w-1/2  pt-4">
                     {gallery != null && (<>
                         <select value={nsfw ? "NSFW" : "SFW"} className="mb-2 shadow-lg rounded-md bg-secondary p-2 w-full text-white" onChange={e=>{
                             setNsfw(e.target.value == "NSFW");