fix:

app/api/galleries/admin/route.ts

@@ -11,16 +11,27 @@ export async function GET(request: Request) {
     return NextResponse.json(galleries);
 }
 
+
 export async function POST(request: Request) {
     const supabase = createClient();
-    const { files, tags, name, nsfw, tier }: { files: File[], tags: string[], name: string, nsfw:boolean, tier:string } = await request.json();
+    const formData = await request.formData();
+    const files = formData.getAll('files');
+    const tags = formData.getAll('tags');
+    const name = formData.get('name');
+    const nsfw = formData.get('nsfw');
+    const tier = formData.get('tier');
+
     for (let i = 0; i < files.length; i++) {
-        const file = files[i];
+        const file = files[i] as File; // Cast 'file' to 'File' type
         supabase.storage.from('galleries').upload(`${name}/${file.name}`, file);
     }
+
     const { data: gallery, error } = await supabase.from('galleries').insert({ name, tags, nsfw, tier, column_number: 3 }).single();
+
     let { data: galleries, error: galleriesError } = await supabase
         .from('galleries')
         .select('*');
+
     return NextResponse.json({ success: true, galleries });
 }
+

app/gallery/admin/create/page.tsx

@@ -10,6 +10,12 @@ function PageComponent() {
 
     const [selectedGallery, setSelectedGallery] = useState<string | null>(null);
     const [filePreviews, setFilePreviews] = useState<string[]>([]);
+    const [name, setName] = useState<string>('');
+    const [nsfw, setNsfw] = useState<boolean>(false);
+    const [tags, setTags] = useState<string[]>([]);
+    const [tier, setTier] = useState<string>('Free');
+    const [files, setFiles] = useState<FileList>();
+
     const supabase = createClient();
     const user = supabase.auth.getUser();
     const getData = async () => {
@@ -22,6 +28,29 @@ function PageComponent() {
         setSelectedGallery(null);
     }
 
+    const createGallery = async () => {
+        const formData = new FormData();
+        formData.append('name', name);
+        if (files) {
+            Array.from(files).forEach((file: File) => {
+                formData.append('files', file);
+            });
+        }
+        formData.append('tags', JSON.stringify(tags));
+        formData.append('nsfw', nsfw.toString());
+        formData.append('tier', tier);
+        const response = await fetch('/api/galleries/admin', {
+            method: 'POST',
+            body: formData,
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+        } else {
+            console.log(response)
+        }
+    }
+
     const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         const files = event.target.files;
         if (files) {
@@ -33,6 +62,7 @@ function PageComponent() {
                     if (e.target && e.target.result) {
                         previews.push(e.target.result.toString());
                         if (previews.length === files.length) {
+                            setFiles(files);
                             setFilePreviews(previews);
                         }
                     }
@@ -48,6 +78,8 @@ function PageComponent() {
                 <div className="w-full flex">
                     <input
                         type="text"
+                        value={name}
+                        onChange={(e) => setName(e.target.value)}
                         className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white shadow-lg"
                         placeholder="Gallery Name"
                     />
@@ -57,7 +89,7 @@ function PageComponent() {
                         </button>
                     </div>
                     <div className="w-1/4">
-                        <button className="w-full bg-success hover:bg-success-light text-white rounded-md p-2 ml-2 shadow-lg    ">
+                        <button onClick={()=>{createGallery()}} className="w-full bg-success hover:bg-success-light text-white rounded-md p-2 ml-2 shadow-lg    ">
                             Create Gallery
                         </button>
                     </div>
@@ -71,10 +103,27 @@ function PageComponent() {
                             nsfwButtonEnabled={true}
                             searchChanged={(search) => { }}
                             nsfwChanged={(nsfw) => { }}
-                            tagsChanged={(tags) => {}}
+                            tagsChanged={(tags) => { setTags(tags)  }}
                         />
                     </div>
                     <div className="w-1/2">
+                        <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");
+                        }}>
+                            <option value="NSFW" selected={nsfw}>NSFW</option>
+                            <option value="SFW" selected={nsfw}>SFW</option>
+                        </select>
+                        <select onChange={e=>{
+                            setTier(e.target.value);
+                        }} className="mb-2 shadow-lg mr-2 rounded-md bg-secondary p-2 w-full text-white">
+                            <option value="Free"   selected={tier === "Free"}>Free</option>
+                            <option value="Tier 1" selected={tier === "Tier 1"}>Tier 1</option>
+                            <option value="Tier 2" selected={tier === "Tier 2"}>Tier 2</option>
+                            <option value="Tier 3" selected={tier === "Tier 3"}>Tier 3</option>
+                        </select>
+                        <select className="mb-2 shadow-lg mr-2 rounded-md bg-secondary p-2 w-full text-white">
+                            <option value="" disabled selected>Select New Thumbnail</option>
+                        </select>
                         <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"

components/neroshitron/gallery.tsx

@@ -101,6 +101,12 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
             closeMenu();
         }
     };
+    const back_page = () => {
+        if (selectedImage != null) {
+            setSelectedImage(null);
+            setImages([]);
+        }
+    };
 
     const renderButtons = () => {
         return (
@@ -108,7 +114,7 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
                 <div className='grid grid-cols-5 pl-4 gap-4 pr-4'>
                     <button
                         className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 bg-error hover:bg-error-light`}
-                        onClick={() => close()}
+                        onClick={() => back_page()}
                     >
                         <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="M6 18 18 6M6 6l12 12" />
@@ -159,8 +165,7 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
 
     return (
         <div >
-            <div className="z-20"
+            <div className="z-20" style={{ width: selectedImage ? "100%" : "auto", height: selectedImage ? "100%" : "auto" }}>
-                onClick={close} style={{ width: selectedImage ? "100%" : "auto", height: selectedImage ? "100%" : "auto" }}>
                 <div className='flex justify-center items-center pt-2 pb-20'>
                     {renderButtons()}
                 </div>