damien/neroshitron
1
0
Fork 0
mirror of https://github.com/D4M13N-D3V/neroshitron.git synced 2025-03-14 10:05:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: new shit (#4)

Browse Source 
* fix: navigation bar code is minimized, started seperating out components and refactoring them

* feat: search components

* Update search.tsx

* fix: autofocus

* fix: tags and search

* Update page_old.tsx

* Update galleries.tsx

* Update tag_selector.tsx

* Update tag_selector.tsx
This commit is contained in:
Damien Ostler 2024-06-01 06:39:05 -04:00 committed by GitHub
parent f2bd76487e
commit f30d2c5a2a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 117 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

231
app/gallery/page_old.tsx
View File

@ -1,131 +1,126 @@
"use client"; // "use client";
import { createClient } from "@/utils/supabase/client"; // import { createClient } from "@/utils/supabase/client";
import { redirect } from "next/navigation"; // import React, { useState, useEffect } from 'react';
import GalleryThumbnail from "@/components/ui/gallery_thumbnail"; // import { User } from "@supabase/supabase-js";
// import Search from "@/components/ui/search";
// function PageComponent() {
import React, { useState, useEffect } from 'react'; // const supabase = createClient();
import { User } from "@supabase/supabase-js";
import Gallery from "@/components/ui/gallery";
import Search from "@/components/ui/search";
function PageComponent() { // const [showNSFW, setShowNSFW] = useState<boolean>(true);
// const [randomIds, setRandomIds] = useState<string[]>([]); // replace any with your gallery type
// const [isOpen, setIsOpen] = useState<boolean>(false);
// const [galleries, setGalleries] = useState<any[]>([]); // replace any with your gallery type
// const [user, setUser] = useState<User | null>(null);
// const [loading, setLoading] = useState<boolean>(true);
// const [selectedGallery, setSelectedGallery] = useState<string | null>(null);
// const [search, setSearch] = useState<string>('');
// const [galleryColumns, setColumns] = useState<number>(0);
// const [selectedTags, setSelectedTags] = useState<string[]>([]);
// const generateRandomString = function (length: number) {
// let result = '';
// let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
// let charactersLength = characters.length;
// for (let i = 0; i < length; i++) {
// result += characters.charAt(Math.floor(Math.random() * charactersLength));
// }
// return result;
// }
const supabase = createClient(); // const selectGallery = (gallery: string, columns: number) => {
// setRandomIds([generateRandomString(3), generateRandomString(3), generateRandomString(3), generateRandomString(3)]);
// setSelectedGallery(gallery);
// setColumns(columns);
// setIsOpen(true);
// };
const [showNSFW, setShowNSFW] = useState<boolean>(true); // const closeGallery = () => {
const [randomIds, setRandomIds] = useState<string[]>([]); // replace any with your gallery type // setSelectedGallery(null);
const [isOpen, setIsOpen] = useState<boolean>(false); // setColumns(0);
const [galleries, setGalleries] = useState<any[]>([]); // replace any with your gallery type // setIsOpen(false);
const [user, setUser] = useState<User | null>(null); // }
const [loading, setLoading] = useState<boolean>(true);
const [selectedGallery, setSelectedGallery] = useState<string | null>(null);
const [search, setSearch] = useState<string>('');
const [galleryColumns, setColumns] = useState<number>(0);
const [selectedTags, setSelectedTags] = useState<string[]>([]);
const generateRandomString = function (length: number) {
let result = '';
let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let charactersLength = characters.length;
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
const selectGallery = (gallery: string, columns: number) => { // const getData = async () => {
setRandomIds([generateRandomString(3), generateRandomString(3), generateRandomString(3), generateRandomString(3)]); // let { data: { user } } = await supabase.auth.getUser();
setSelectedGallery(gallery); // const galleriesResponse = await fetch(`/api/galleries?search=` + search + '&nsfw=' + showNSFW, {
setColumns(columns); // method: 'POST',
setIsOpen(true); // headers: {
}; // 'Content-Type': 'application/json'
// },
const closeGallery = () => { // body: JSON.stringify({ tags: selectedTags })
setSelectedGallery(null); // });
setColumns(0); // const galleriesData = await galleriesResponse.json();
setIsOpen(false); // setGalleries(galleriesData);
} // setUser(user);
// setLoading(false);
const getData = async () => { // }
let { data: { user } } = await supabase.auth.getUser();
const galleriesResponse = await fetch(`/api/galleries?search=` + search + '&nsfw=' + showNSFW, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ tags: selectedTags })
});
const galleriesData = await galleriesResponse.json();
setGalleries(galleriesData);
setUser(user);
setLoading(false);
}
useEffect(() => { // useEffect(() => {
getData(); // getData();
}, [selectedTags, search, showNSFW]); // }, [selectedTags, search, showNSFW]);
return ( // return (
<div> // <div>
<div className="fixed w-full h-full overflow-hidden z-0 animate-fade-left animate-fade-left animate-once animate-duration-[2000ms] animate-normal animate-fill-forwards"> // <div className="fixed w-full h-full overflow-hidden z-0 animate-fade-left animate-fade-left animate-once animate-duration-[2000ms] animate-normal animate-fill-forwards">
<img // <img
src="gallery_girl.png" // src="gallery_girl.png"
className="float-right object-cover h-screen w-full lg:w-5/6 xl:w-3/6 opacity-50 overflow-hidden" // className="float-right object-cover h-screen w-full lg:w-5/6 xl:w-3/6 opacity-50 overflow-hidden"
alt="Background" // alt="Background"
/> // />
</div> // </div>
<Search // <Search
/> // />
{/* // {/*
These are the thumbnails for the gallery below the search bar // These are the thumbnails for the gallery below the search bar
*/} // */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-60 gap-x-5 h-full mb-96 animate-in"> // <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-60 gap-x-5 h-full mb-96 animate-in">
{galleries && galleries.map((gallery, index) => ( // {galleries && galleries.map((gallery, index) => (
<div className="mx-auto"> // <div className="mx-auto">
<GalleryThumbnail // <GalleryThumbnail
key={gallery.name + " " + showNSFW} // key={gallery.name + " " + showNSFW}
id={gallery.name} // id={gallery.name}
title={gallery.name} // title={gallery.name}
tags={gallery.tags} // tags={gallery.tags}
columns={gallery.columns} // columns={gallery.columns}
showNsfw={showNSFW} // showNsfw={showNSFW}
subscription={gallery.tier as string} // subscription={gallery.tier as string}
onSelect={selectGallery} // onSelect={selectGallery}
nsfw={gallery.nsfw} // nsfw={gallery.nsfw}
></GalleryThumbnail> // ></GalleryThumbnail>
</div> // </div>
))} // ))}
</div> // </div>
{isOpen ? ( // {isOpen ? (
<> // <>
{/* // {/*
This is the modal for holding the gallery // This is the modal for holding the gallery
*/} // */}
<div // <div
className={`fixed inset-0 transition-opacity z-30 ${isOpen ? 'animate-in' : 'fade-out' // className={`fixed inset-0 transition-opacity z-30 ${isOpen ? 'animate-in' : 'fade-out'
}`} // }`}
aria-hidden="true" // aria-hidden="true"
> // >
<div // <div
className="absolute inset-0 bg-neroshi-blue-900 opacity-70 z-30" // className="absolute inset-0 bg-neroshi-blue-900 opacity-70 z-30"
onClick={() => setIsOpen(false)} // onClick={() => setIsOpen(false)}
></div> // ></div>
<div className="absolute inset-0 overflow-y-auto overflow-x-hidden no-scrollbar pt-2 w-full p-20 z-30"> // <div className="absolute inset-0 overflow-y-auto overflow-x-hidden no-scrollbar pt-2 w-full p-20 z-30">
<Gallery // <Gallery
id={selectedGallery as string} // id={selectedGallery as string}
columns={galleryColumns} // columns={galleryColumns}
closeMenu={() => closeGallery()} // closeMenu={() => closeGallery()}
></Gallery> // ></Gallery>
</div> // </div>
</div> // </div>
</> // </>
) : null} // ) : null}
</div> // </div>
); // );
} // }
export default PageComponent; // export default PageComponent;

3
components/neroshitron/galleries.tsx
View File

@ -41,7 +41,8 @@ const Galleries = ({ nsfw, tags, search }:TagProps) => {
return ( return (
<div className="absolute inset-0 mx-auto ml-16 md:ml-0 pt-48 p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-60 gap-x-4 animate-in overflow-y-scroll no-scrollbar z-0"> <div className="absolute inset-0 mx-auto ml-16 md:ml-0 pt-48 p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-60 gap-x-4 animate-in overflow-y-scroll no-scrollbar z-0">
{galleries && galleries.map((gallery, index) => (
{galleries && galleries.map((gallery:any, index) => (
<GalleryThumbnail <GalleryThumbnail
key={gallery.name + " " + nsfw} key={gallery.name + " " + nsfw}
id={gallery.name} id={gallery.name}

4
components/neroshitron/tag_selector.tsx
View File

@ -46,8 +46,8 @@ const TagSelector = forwardRef<TagSelectorProps, {tagsInput:any[], tagSearch: st
return ( return (
(tags.length > 0)? ( (tags.length > 0)? (
<div className="animate-in flex md:w-full animate-in pt-4 justify-center items-center"> <div className="animate-in flex md:w-full animate-in pt-4 justify-center items-center">
<div className="z-10 grid p-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-1 w-full h-max-72 overflow-y-scroll no-scrollbar pt-4 bg-neroshi-blue-900 rounded-md opacity-90 backdrop-filter backdrop-blur-md mx-auto"> <div className="z-10 grid p-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-1 w-full max-h-96 overflow-y-scroll pt-4 bg-neroshi-blue-900 rounded-md opacity-90 backdrop-filter backdrop-blur-md mx-auto">
{props.tagsInput.map((tag: any) => ( {props.tagsInput.map((tag: any) => (
(tagSearch === '' || tag.name.toLowerCase().includes(tagSearch.toLowerCase())) && // Updated condition (tagSearch === '' || tag.name.toLowerCase().includes(tagSearch.toLowerCase())) && // Updated condition
<Tag key={generateRandomString()} tag={tag.name} selected={selectedTags.includes(tag.name)} onTagClicked={(tag) => handleTag(tag)} /> <Tag key={generateRandomString()} tag={tag.name} selected={selectedTags.includes(tag.name)} onTagClicked={(tag) => handleTag(tag)} />
))} ))}