damien/neroshitron
1
0
Fork 0
mirror of https://github.com/D4M13N-D3V/neroshitron.git synced 2025-06-15 20:59:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: hooked up tiers to galleries page

Browse Source
This commit is contained in:
Damien Ostler 2024-06-08 19:11:32 -04:00
parent 420e029d66
commit 164aec1c51
2 changed files with 37 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/neroshitron/galleries.tsx
View File

@ -17,6 +17,7 @@ const Galleries = ({ nsfw, tags, search, gallerySelected }: TagProps) => {
const [searchState, setSearchState] = useState<string>(search); const [searchState, setSearchState] = useState<string>(search);
const [selectedGallery, setSelectedGallery] = useState<string | null>(null); const [selectedGallery, setSelectedGallery] = useState<string | null>(null);
const [tiers, setTiers] = useState<any[]>([]);
const selectGallery = (gallery: string) => { const selectGallery = (gallery: string) => {
setSelectedGallery(gallery); setSelectedGallery(gallery);
@ -25,6 +26,17 @@ const Galleries = ({ nsfw, tags, search, gallerySelected }: TagProps) => {
const getData = async () => { const getData = async () => {
try {
const response = await fetch('/api/tiers');
if (response.ok) {
const data = await response.json();
setTiers(data);
} else {
console.error('Failed to fetch users');
}
} catch (error) {
console.error('Error fetching users:', error);
}
const galleriesResponse = await fetch(`/api/galleries?search=` + searchState + '&nsfw=' + nsfwState, { const galleriesResponse = await fetch(`/api/galleries?search=` + searchState + '&nsfw=' + nsfwState, {
method: 'POST', method: 'POST',
headers: { headers: {
@ -43,19 +55,25 @@ const Galleries = ({ nsfw, tags, search, gallerySelected }: 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-48 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-48 gap-x-4 animate-in overflow-y-scroll no-scrollbar z-0">
{galleries && galleries.map((gallery: any, index) => ( {galleries && galleries.map((gallery: any, index) => {
<GalleryThumbnail const tier = tiers.find((tier) => tier.name == gallery.tier);
key={gallery.name + " " + nsfw} const subscriptionColor = tier ? tier.color : null;
id={gallery.name}
title={gallery.name} return (
tags={gallery.tags} <GalleryThumbnail
columns={gallery.columns} key={gallery.name + " " + nsfw}
showNsfw={nsfw} id={gallery.name}
subscription={gallery.tier as string} title={gallery.name}
onSelect={selectGallery} tags={gallery.tags}
nsfw={gallery.nsfw} columns={gallery.columns}
></GalleryThumbnail> showNsfw={nsfw}
))} subscription={gallery.tier as string}
subscriptionColor={subscriptionColor}
onSelect={selectGallery}
nsfw={gallery.nsfw}
></GalleryThumbnail>
);
})}
</div> </div>
); );
}; };

20
components/neroshitron/gallery_thumbnail.tsx
View File

@ -6,12 +6,13 @@ interface GalleryThumbnailProps {
onSelect: (id: string, columns: number) => void; onSelect: (id: string, columns: number) => void;
title: string; title: string;
subscription: string; subscription: string;
subscriptionColor: string;
tags: string[]; tags: string[];
showNsfw: boolean; showNsfw: boolean;
nsfw: boolean; nsfw: boolean;
} }
const GalleryThumbnail = ({ id, columns, onSelect, title, showNsfw, nsfw, subscription, tags }: GalleryThumbnailProps) => { const GalleryThumbnail = ({ id, columns, onSelect, title, showNsfw, nsfw, subscription, subscriptionColor, tags }: GalleryThumbnailProps) => {
const [galleryId, setGalleryId] = useState<string>(id); const [galleryId, setGalleryId] = useState<string>(id);
const [thumbnailUrl, setThumbnailUrl] = useState<string>(''); const [thumbnailUrl, setThumbnailUrl] = useState<string>('');
const [isLoading, setIsLoading] = useState<boolean>(true); const [isLoading, setIsLoading] = useState<boolean>(true);
@ -21,6 +22,7 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, showNsfw, nsfw, subscr
const [showNsfwState, setShowNsfw] = useState<boolean>(showNsfw); const [showNsfwState, setShowNsfw] = useState<boolean>(showNsfw);
const [subscriptionState, setSubscription] = useState<string>(subscription); const [subscriptionState, setSubscription] = useState<string>(subscription);
const [tagsState, setTags] = useState<string[]>(tags); const [tagsState, setTags] = useState<string[]>(tags);
console.log(subscriptionColor)
const openGallery = () => { const openGallery = () => {
onSelect(galleryId, galleryCollumns); onSelect(galleryId, galleryCollumns);
}; };
@ -42,7 +44,7 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, showNsfw, nsfw, subscr
return ( return (
<div className=" py-3 sm:max-w-xl sm:mx-auto flex-3 animate-fade-up animate-once animate-duration-1000 animate-ease-out animate-normal animate-fill-forwards"> <div className=" py-3 sm:max-w-xl sm:mx-auto flex-3 animate-fade-up animate-once animate-duration-1000 animate-ease-out animate-normal animate-fill-forwards">
<div className="h-48 overflow-visible w-full relative hover:scale-95 rounded-3xl" style={{ cursor: 'pointer' }}> <div className="h-48 overflow-visible w-full relative hover:scale-95 rounded-3xl" style={{ cursor: 'pointer'}}>
{!isLoading ? ( {!isLoading ? (
<> <>
<img <img
@ -72,18 +74,8 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, showNsfw, nsfw, subscr
{nsfwState && ( {nsfwState && (
<span className=" bg-error text-white px-2 py-1 mr-2 rounded-md text-sm h-full flex items-center">NSFW</span> <span className=" bg-error text-white px-2 py-1 mr-2 rounded-md text-sm h-full flex items-center">NSFW</span>
)} )}
{subscriptionState === "Free" && ( <span className="text-white px-2 py-1 rounded-md text-sm h-full flex items-center" style={{ cursor: 'pointer', backgroundColor: subscriptionColor }}>Free</span>
<span className=" bg-free text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Free</span>
)}
{subscriptionState === "Tier 1" && (
<span className=" bg-tier1 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 1</span>
)}
{subscriptionState === "Tier 2" && (
<span className=" bg-tier2 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 2</span>
)}
{subscriptionState === "Tier 3" && (
<span className=" bg-tier3 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 3</span>
)}
</div> </div>
</div> </div>
{/* <div className="text-white flex justify-between"> {/* <div className="text-white flex justify-between">