From 2c59660566fdf801d107b31e72b5ec0b681ac71a Mon Sep 17 00:00:00 2001
From: Damien Ostler <damienostler1@outlook.com>
Date: Sun, 2 Jun 2024 03:48:21 -0400
Subject: [PATCH] feat: create page

---
 app/gallery/admin/create/page.tsx         | 88 +++++++++++++++++++++++
 app/gallery/admin/page.tsx                | 63 ++++++++++------
 app/gallery/admin/view/page.tsx           | 88 +++++++++++++++++++++++
 app/gallery/page.tsx                      |  3 +
 components/neroshitron/navigation_bar.tsx | 11 ++-
 components/neroshitron/search_input.tsx   |  2 +-
 6 files changed, 230 insertions(+), 25 deletions(-)
 create mode 100644 app/gallery/admin/create/page.tsx
 create mode 100644 app/gallery/admin/view/page.tsx

diff --git a/app/gallery/admin/create/page.tsx b/app/gallery/admin/create/page.tsx
new file mode 100644
index 0000000..e0ae082
--- /dev/null
+++ b/app/gallery/admin/create/page.tsx
@@ -0,0 +1,88 @@
+"use client";
+import { createClient } from "@/utils/supabase/client";
+import React, { useState, useEffect } from 'react';
+import Search from "@/components/neroshitron/search";
+import Gallery from "@/components/neroshitron/gallery";
+import Masonry from "react-masonry-css";
+import SearchInput from "@/components/neroshitron/search_input";
+
+function PageComponent() {
+
+    const [selectedGallery, setSelectedGallery] = useState<string | null>(null);
+    const [filePreviews, setFilePreviews] = useState<string[]>([]);
+    const supabase = createClient();
+    const user = supabase.auth.getUser();
+    const getData = async () => {
+    }
+    useEffect(() => {
+        getData();
+    }, [selectedGallery]);
+
+    const closeGallery = () => {
+        setSelectedGallery(null);
+    }
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const files = event.target.files;
+        if (files) {
+            const previews: string[] = [];
+            for (let i = 0; i < files.length; i++) {
+                const file = files[i];
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    if (e.target && e.target.result) {
+                        previews.push(e.target.result.toString());
+                        if (previews.length === files.length) {
+                            setFilePreviews(previews);
+                        }
+                    }
+                };
+                reader.readAsDataURL(file);
+            }
+        }
+    };
+
+    return (
+        <div className="w-full 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 flex">
+                    <input
+                        type="text"
+                        className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white"
+                        placeholder="Gallery Name"
+                    />
+                    <div className="w-1/2">
+                        <button className="w-full bg-success hover:bg-success-light text-white rounded-md p-2">
+                            Create Gallery
+                        </button>
+                    </div>
+                    </div>
+                    <div className="w-full flex">
+                    <div className="w-1/2 mr-2">
+                        <SearchInput
+                            nsfwButtonEnabled={false}
+                            searchChanged={(search) => {}}
+                            nsfwChanged={(nsfw) => {}}
+                            tagsChanged={(tags) => {}}
+                        />
+                    </div>
+                    <div className="w-1/2">
+                        <input
+                            className="relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-secondary-lighter bg-transparent bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-surface transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:me-3 file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-e file:border-solid file:border-inherit file:bg-transparent file:px-3  file:py-[0.32rem] file:text-surface focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/70 dark:text-white  file:dark:text-white"
+                            type="file"
+                            id="formFileMultiple"
+                            multiple
+                            onChange={handleFileChange}
+                        />
+                        <Masonry breakpointCols={3} className="my-masonry-grid pl-6 col-span-2">
+                            {filePreviews.map((preview, index) => (
+                                <img key={index} src={preview} alt={`Preview ${index}`} />
+                            ))}
+                        </Masonry>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+export default PageComponent;
\ No newline at end of file
diff --git a/app/gallery/admin/page.tsx b/app/gallery/admin/page.tsx
index 2257dd6..9b9ab32 100644
--- a/app/gallery/admin/page.tsx
+++ b/app/gallery/admin/page.tsx
@@ -42,30 +42,47 @@ function PageComponent() {
         }
     };
 
-    return (<div className="w-full text-white flex justify-center items-center">
-    <div className="w-1/2 rounded-md bg-primary p-12 mt-32">
-        <SearchInput nsfwButtonEnabled={false} searchChanged={(search) => { }} nsfwChanged={(nsfw) => { }} tagsChanged={(tags) => { }} />
-        <input type="text" className="mb-8 rounded-md bg-secondary p-4 w-full text-white" placeholder="Gallery Name" />
-        <input
-            className="relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-secondary-lighter bg-transparent bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-surface transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:me-3 file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-e file:border-solid file:border-inherit file:bg-transparent file:px-3  file:py-[0.32rem] file:text-surface focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/70 dark:text-white  file:dark:text-white"
-            type="file"
-            id="formFileMultiple"
-            multiple
-            onChange={handleFileChange}
-        />
-        <Masonry
-            breakpointCols={3}
-            className="my-masonry-grid pl-6 col-span-2"
-        >
-            {filePreviews.map((preview, index) => (
-                <img key={index} src={preview} alt={`Preview ${index}`} />
-            ))}
-        </Masonry>
-        <div>
-            <button className="mt-4 bg-success hover:bg-success-light text-white rounded-md p-2">Save</button>
+    return (
+        <div className="w-full 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 flex">
+                    <input
+                        type="text"
+                        className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white"
+                        placeholder="Gallery Name"
+                    />
+                    <div className="w-1/2">
+                        <button className="w-full bg-success hover:bg-success-light text-white rounded-md p-2">
+                            Create Gallery
+                        </button>
+                    </div>
+                    </div>
+                    <div className="w-full flex">
+                    <div className="w-1/2">
+                        <SearchInput
+                            nsfwButtonEnabled={false}
+                            searchChanged={(search) => {}}
+                            nsfwChanged={(nsfw) => {}}
+                            tagsChanged={(tags) => {}}
+                        />
+                    </div>
+                    <div className="w-1/2">
+                        <input
+                            className="relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-secondary-lighter bg-transparent bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-surface transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:me-3 file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-e file:border-solid file:border-inherit file:bg-transparent file:px-3  file:py-[0.32rem] file:text-surface focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/70 dark:text-white  file:dark:text-white"
+                            type="file"
+                            id="formFileMultiple"
+                            multiple
+                            onChange={handleFileChange}
+                        />
+                        <Masonry breakpointCols={3} className="my-masonry-grid pl-6 col-span-2">
+                            {filePreviews.map((preview, index) => (
+                                <img key={index} src={preview} alt={`Preview ${index}`} />
+                            ))}
+                        </Masonry>
+                    </div>
+                </div>
+            </div>
         </div>
-    </div>
-</div>
     );
 }
 export default PageComponent;
\ No newline at end of file
diff --git a/app/gallery/admin/view/page.tsx b/app/gallery/admin/view/page.tsx
new file mode 100644
index 0000000..f37b398
--- /dev/null
+++ b/app/gallery/admin/view/page.tsx
@@ -0,0 +1,88 @@
+"use client";
+import { createClient } from "@/utils/supabase/client";
+import React, { useState, useEffect } from 'react';
+import Search from "@/components/neroshitron/search";
+import Gallery from "@/components/neroshitron/gallery";
+import Masonry from "react-masonry-css";
+import SearchInput from "@/components/neroshitron/search_input";
+
+function PageComponent() {
+
+    const [selectedGallery, setSelectedGallery] = useState<string | null>(null);
+    const [filePreviews, setFilePreviews] = useState<string[]>([]);
+    const supabase = createClient();
+    const user = supabase.auth.getUser();
+    const getData = async () => {
+    }
+    useEffect(() => {
+        getData();
+    }, [selectedGallery]);
+
+    const closeGallery = () => {
+        setSelectedGallery(null);
+    }
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const files = event.target.files;
+        if (files) {
+            const previews: string[] = [];
+            for (let i = 0; i < files.length; i++) {
+                const file = files[i];
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    if (e.target && e.target.result) {
+                        previews.push(e.target.result.toString());
+                        if (previews.length === files.length) {
+                            setFilePreviews(previews);
+                        }
+                    }
+                };
+                reader.readAsDataURL(file);
+            }
+        }
+    };
+
+    return (
+        <div className="w-full 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 flex">
+                    <input
+                        type="text"
+                        className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white"
+                        placeholder="Gallery Name"
+                    />
+                    <div className="w-1/2">
+                        <button className="w-full bg-success hover:bg-success-light text-white rounded-md p-2">
+                            Create Gallery
+                        </button>
+                    </div>
+                    </div>
+                    <div className="w-full flex">
+                    <div className="w-1/2 pr-1">
+                        <SearchInput
+                            nsfwButtonEnabled={false}
+                            searchChanged={(search) => {}}
+                            nsfwChanged={(nsfw) => {}}
+                            tagsChanged={(tags) => {}}
+                        />
+                    </div>
+                    <div className="w-1/2">
+                        <input
+                            className="relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-secondary-lighter bg-transparent bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-surface transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:me-3 file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-e file:border-solid file:border-inherit file:bg-transparent file:px-3  file:py-[0.32rem] file:text-surface focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/70 dark:text-white  file:dark:text-white"
+                            type="file"
+                            id="formFileMultiple"
+                            multiple
+                            onChange={handleFileChange}
+                        />
+                        <Masonry breakpointCols={3} className="my-masonry-grid pl-6 col-span-2">
+                            {filePreviews.map((preview, index) => (
+                                <img key={index} src={preview} alt={`Preview ${index}`} />
+                            ))}
+                        </Masonry>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+export default PageComponent;
\ No newline at end of file
diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx
index a5d95ae..26c4ba8 100644
--- a/app/gallery/page.tsx
+++ b/app/gallery/page.tsx
@@ -3,6 +3,7 @@ import { createClient } from "@/utils/supabase/client";
 import React, { useState, useEffect } from 'react';
 import Search from "@/components/neroshitron/search";
 import Gallery from "@/components/neroshitron/gallery";
+import Link from "next/link";
 
 function PageComponent() {
 
@@ -30,7 +31,9 @@ function PageComponent() {
           alt="Background"
         />
       </div>
+      <div className="w-2/3">
         <Search gallerySelected={(gallery:string)=>{setSelectedGallery(gallery)}}/>
+      </div>
 
        {selectedGallery!=null ? (
          <>
diff --git a/components/neroshitron/navigation_bar.tsx b/components/neroshitron/navigation_bar.tsx
index 34cf47d..cc293ee 100644
--- a/components/neroshitron/navigation_bar.tsx
+++ b/components/neroshitron/navigation_bar.tsx
@@ -38,8 +38,17 @@ console.log(currentPage)
   return (
     <div className="flex justify-center items-center pt-2 ">
       <nav className="w-auto bg-info bg-opacity-80  flex justify-center z-10 h-16 animate-in rounded-md" style={{ backdropFilter: 'blur(10px)' }}>
-        <div className="w-full max-w-2xl flex justify-between items-center p-3 text-sm">
+        <div className="w-auto flex justify-between items-center p-3 text-sm">
           <div className="flex items-center gap-2 z-10">
+
+          {/* This is admin stuff */}
+            <Link
+              href="/gallery/admin"
+              className={`py-2 px-3 w-32  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">Gallery Admin</span>
+            </Link>
+
             <Link
               href="/gallery"
               className={`py-2 px-3 flex rounded-md no-underline ${currentPage!="gallery" ? 'bg-primary hover:bg-primary-light' : 'bg-secondary hover:bg-secondary-light'}`}
diff --git a/components/neroshitron/search_input.tsx b/components/neroshitron/search_input.tsx
index 2c5c392..cb63fc1 100644
--- a/components/neroshitron/search_input.tsx
+++ b/components/neroshitron/search_input.tsx
@@ -64,7 +64,7 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
   return (
     <>
       <div className="relative w-full flex flex-col items-center justify-center z-10">
-        <div className="search-box mx-auto my-auto w-full sm:w-full md:w-full lg:w-3/4 xl:w-3/4">
+        <div className="search-box mx-auto my-auto w-full">
           <div className="flex flex-row">
 
             {(selectingTags) ? (