This commit is contained in:
Damien Ostler 2024-06-02 03:08:55 -04:00
parent de08c2ddd0
commit d33f36adaf
5 changed files with 78 additions and 5 deletions

2
.idea/.name generated
View File

@ -1 +1 @@
.gitignore
page.tsx

View File

@ -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";
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">
<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>
</div>
</div>
</div>
);
}
export default PageComponent;

View File

@ -96,7 +96,7 @@ console.log(currentPage)
) : (
<Link
href="/subscriptions"
className={`ml-2 py-2 px-3 flex rounded-md no-underline bg-success hover:bg-secondary`}
className={`ml-2 py-2 px-3 flex rounded-md no-underline bg-success hover:bg-success-light`}
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6 lg:hidden block">
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />

View File

@ -44,7 +44,7 @@ const Search = ({ gallerySelected }: SearchProps) => {
<Galleries gallerySelected={(gallery: string) => { setGallery(gallery) }} key={search + "-" + tags.length + "-" + nsfw} search={search} nsfw={nsfw} tags={tags} />
<section className="fixed flex items-center w-full p-8 pt-20 opacity-90 animate-in animate-once animate-duration-500">
<div className="container mx-auto py-8">
<SearchInput searchChanged={(search) => { setSearch(search) }} nsfwChanged={(nsfw) => { setNsfw(nsfw) }} tagsChanged={(tags) => { setTags(tags); }} />
<SearchInput nsfwButtonDisabled={true} searchChanged={(search) => { setSearch(search) }} nsfwChanged={(nsfw) => { setNsfw(nsfw) }} tagsChanged={(tags) => { setTags(tags); }} />
</div>
</section>
</>

View File

@ -9,9 +9,10 @@ interface SearchInputProps {
tagsChanged: (tags: string[]) => void;
searchChanged: (search: string) => void;
nsfwChanged: (nsfw: boolean) => void;
nsfwButtonEnabled: boolean | null;
}
const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged }: SearchInputProps) => {
const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnabled }: SearchInputProps) => {
const [tagSearch, setTagSearch] = useState<string>('');
const [nsfw, setNsfw] = useState<boolean>(false);
@ -62,7 +63,7 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged }: SearchInputPro
const tagOptions = tags.map((tag: { name: string; }) => ({ value: tag.name, label: "🏷️ "+tag.name }));
return (
<>
<div className="relative md:w-full lg:w-2/3 mx-auto flex flex-col items-center justify-center z-10">
<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="flex flex-row">
@ -108,6 +109,7 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged }: SearchInputPro
{nsfw ? "NSFW" : "SFW"}
</button>
</span>
)}
</>
)}
</div>