From e03816928ae4a2013b9696aeb95b93a904192eed Mon Sep 17 00:00:00 2001
From: Damien Ostler <damienostler1@outlook.com>
Date: Sun, 2 Jun 2024 02:49:55 -0400
Subject: [PATCH] fix:images in gallery (#18)

---
 app/gallery/admin/page.tsx              | 71 +++++++++++++++++++++++++
 app/globals.css                         | 17 ++++++
 components/neroshitron/search_input.tsx |  7 ++-
 3 files changed, 93 insertions(+), 2 deletions(-)
 create mode 100644 app/gallery/admin/page.tsx

diff --git a/app/gallery/admin/page.tsx b/app/gallery/admin/page.tsx
new file mode 100644
index 0000000..babdb70
--- /dev/null
+++ b/app/gallery/admin/page.tsx
@@ -0,0 +1,71 @@
+"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";
+
+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">
+            <div className="w-1/2 rounded-md bg-primary p-12 mt-32">
+                <label
+                    htmlFor="formFileMultiple"
+                    className="mb-2 inline-block text-neutral-500 dark:text-neutral-400"
+                >
+                    Images To Upload For Gallery
+                </label>
+                <input
+                    className="relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-secondary-500 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 ">
+                {filePreviews.map((preview, index) => (
+                    <img key={index} src={preview} alt={`Preview ${index}`} />
+                ))}
+                </Masonry>
+            </div>
+        </div>
+    );
+}
+export default PageComponent;
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index 72f0045..66b98fe 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -47,6 +47,23 @@
   }
 }
 
+.my-masonry-grid {
+  display: -webkit-box; /* Not needed if autoprefixing */
+  display: -ms-flexbox; /* Not needed if autoprefixing */
+  display: flex;
+  margin-left: -30px; /* gutter size offset */
+  width: auto;
+}
+.my-masonry-grid_column {
+  padding-left: 30px; /* gutter size */
+  background-clip: padding-box;
+}
+
+/* Style your items */
+.my-masonry-grid_column > div { /* change div to reference your elements you put in <Masonry> */
+  background: grey;
+  margin-bottom: 30px;
+}
 
 .animate-in {
   animation: animateIn 0.3s ease 0.15s both;
diff --git a/components/neroshitron/search_input.tsx b/components/neroshitron/search_input.tsx
index e23eed5..058bb45 100644
--- a/components/neroshitron/search_input.tsx
+++ b/components/neroshitron/search_input.tsx
@@ -96,13 +96,16 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged }: SearchInputPro
                         setSelectedTagsInput([value])
                       }
                     }}
+                    classNames={{
+                      searchBox: "rounded-r-none"
+                    }}
                     value={selectedTagsInput} 
                     primaryColor={"indigo"} />
-                  <span className="flex items-center rounded rounded-l-none border-0 font-bold text-grey-100">
+                  <span className="flex items-center  border-0 font-bold text-grey-100">
                     <button
                       onClick={() => { setNsfw(!nsfw) }}
                       type="button"
-                      className={`animate-in text-sm text-white font-bold h-full w-16 px-2 rounded ${nsfw ? "bg-error hover:bg-error-light" : "bg-success hover:bg-success-light"}`}
+                      className={`animate-in text-sm text-white font-bold h-full w-16 px-2 rounded rounded-l-none ${nsfw ? "bg-error hover:bg-error-light" : "bg-success hover:bg-success-light"}`}
 
                     >
                       {nsfw ? "NSFW" : "SFW"}