fix: girl bg

This commit is contained in:
Damien Ostler 2024-06-02 22:48:00 -04:00
parent 75dad17afe
commit 386927406c
4 changed files with 50 additions and 25 deletions

19
app/api/tiers/route.ts Normal file
View File

@ -0,0 +1,19 @@
import { NextResponse } from "next/server";
import { createClient } from "@/utils/supabase/server";
enum customTypeOptions
{
Free,
Tier1,
Tier2,
Tier3
}
export async function GET(request: Request) {
const supabase = createClient();
return NextResponse.json(customTypeOptions);
}

View File

@ -68,7 +68,7 @@ function PageComponent() {
return ( return (
<div className="w-full h-1/2 text-white lg:flex justify-center items-center animate-in"> <div className="w-full h-1/2 text-white lg:flex justify-center items-center animate-in">
<div className="w-full lg:w-1/3 rounded-md bg-primary opacity-90 g- p-12 m-1 mt-32 shadow-lg backdrop-blur"> <div className="w-full lg:w-1/3 rounded-md bg-primary opacity-90 p-12 m-1 mt-32 shadow-lg backdrop-blur">
<div className="w-full flex"> <div className="w-full flex">
<input type="text" onChange={(e)=>{setNewTagName(e.target.value)}} className="hover:scale-105 focus:scale-95 mb-8 mr-2 rounded-md bg-info-bright p-2 w-1/2 text-white shadow-lg" placeholder="Tag Name" /> <input type="text" onChange={(e)=>{setNewTagName(e.target.value)}} className="hover:scale-105 focus:scale-95 mb-8 mr-2 rounded-md bg-info-bright p-2 w-1/2 text-white shadow-lg" placeholder="Tag Name" />
<button onClick={createTag} className="hover:scale-95 ml-2 shadow-lg w-1/2 h-10 text-center bg-success hover:bg-success-light text-white font-bold rounded flex items-center justify-center"> <button onClick={createTag} className="hover:scale-95 ml-2 shadow-lg w-1/2 h-10 text-center bg-success hover:bg-success-light text-white font-bold rounded flex items-center justify-center">

View File

@ -12,7 +12,10 @@ function PageComponent() {
const supabase = createClient(); const supabase = createClient();
const user = supabase.auth.getUser(); const user = supabase.auth.getUser();
const [gallery , setGallery] = useState<any>(null); const [gallery , setGallery] = useState<any>(null);
const [galleryName, setGalleryName] = useState<string>(''); const [galleryName, setGalleryName] = useState<string>('');
const [nsfw, setNsfw] = useState<boolean>(false);
const [tags, setTags] = useState<string[]>([]);
const [tier, setTier] = useState<string>('Free');
const getData = async () => { const getData = async () => {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
@ -25,6 +28,9 @@ function PageComponent() {
}); });
const galleryData = await galleryResponse.json(); const galleryData = await galleryResponse.json();
setGallery(galleryData.gallery); setGallery(galleryData.gallery);
setNsfw(galleryData.gallery.nsfw);
setTags(galleryData.gallery.tags);
setTier(galleryData.gallery.tier);
setGalleryName(galleryData.gallery.name); setGalleryName(galleryData.gallery.name);
} }
useEffect(() => { useEffect(() => {
@ -32,27 +38,27 @@ function PageComponent() {
}, []); }, []);
useEffect(() => { useEffect(() => {
}, [gallery]); }, [gallery, nsfw, tags, galleryName, tier]);
return ( return (
<div className="w-full text-white flex justify-center items-center animate-in"> <div className="w-full text-white flex justify-center items-center animate-in">
<div className="w-full lg:w-1/2 rounded-md opacity-90 backdrop-blur-lg bg-primary p-12 mt-32 shadow-lg"> <div className="w-full lg:w-1/2 rounded-md p-12 mt-14 ">
<div className="w-full flex pb-72"> <div className="w-full flex pb-60">
{gallery != null && ( {gallery != null && (
<GalleryThumbnail <GalleryThumbnail
key={"galleryThumbnail"} key={"galleryThumbnail"}
id={gallery} id={galleryName}
columns={3} columns={3}
onSelect={function (id: string, columns: number): void {}} onSelect={function (id: string, columns: number): void {}}
title={gallery.name} title={galleryName}
subscription={gallery.tier} subscription={tier}
tags={gallery.tags} tags={tags}
showNsfw={true} showNsfw={true}
nsfw={gallery.nsfw} nsfw={nsfw}
></GalleryThumbnail> ></GalleryThumbnail>
)} )}
</div> </div>
<div className="w-full flex"> <div className="w-full flex opacity-90 backdrop-blur-lg bg-primary shadow-lg p-8 pb-0 rounded">
<input <input
type="text" type="text"
className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white" className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white"
@ -82,7 +88,7 @@ function PageComponent() {
</button> </button>
</div> </div>
</div> </div>
<div className="w-full flex"> <div className="w-full flex opacity-90 backdrop-blur-lg bg-primary shadow-lg p-8 pt-0 rounded">
<div className="w-1/2 mr-2"> <div className="w-1/2 mr-2">
<SearchInput <SearchInput
placeholderTags={[ placeholderTags={[
@ -95,29 +101,29 @@ function PageComponent() {
/> />
</div> </div>
<div className="w-1/2"> <div className="w-1/2">
<select className="mb-2 shadow-lg rounded-md bg-secondary p-2 w-full text-white"> {gallery != null && (<>
<option value="" disabled selected></option> <select value={nsfw ? "NSFW" : "SFW"} className="mb-2 shadow-lg rounded-md bg-secondary p-2 w-full text-white" onChange={e=>{
{filePreviews.map((preview, index) => ( setNsfw(e.target.value === "NSFW");
<option key={index} value={preview}>{`Thumbnail ${index}`}</option> }}>
))} <option value="NSFW" selected={nsfw}>NSFW</option>
<option value="SFW" selected={nsfw}>SFW</option>
</select> </select>
<select className="mb-2 shadow-lg mr-2 rounded-md bg-secondary p-2 w-full text-white"> <select className="mb-2 shadow-lg mr-2 rounded-md bg-secondary p-2 w-full text-white">
<option value="" disabled selected>Select New Tier</option> <option value="Free" selected={tier === "Free"}>Free</option>
{filePreviews.map((preview, index) => ( <option value="Tier 1" selected={tier === "Tier 1"}>Tier 1</option>
<option key={index} value={preview}>{`Thumbnail ${index}`}</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>
<select className="mb-2 shadow-lg mr-2 rounded-md bg-secondary p-2 w-full text-white"> <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> <option value="" disabled selected>Select New Thumbnail</option>
{filePreviews.map((preview, index) => (
<option key={index} value={preview}>{`Thumbnail ${index}`}</option>
))}
</select> </select>
<Masonry breakpointCols={3} className="my-masonry-grid pl-6 col-span-2"> <Masonry breakpointCols={3} className="my-masonry-grid pl-6 col-span-2">
{filePreviews.map((preview, index) => ( {filePreviews.map((preview, index) => (
<img key={index} src={preview} alt={`Preview ${index}`} /> <img key={index} src={preview} alt={`Preview ${index}`} />
))} ))}
</Masonry> </Masonry>
</>
)}
</div> </div>
</div> </div>
</div> </div>

View File

@ -5,7 +5,7 @@ const RightHandLayoutImage: React.FC = () => {
return ( return (
<div className="fixed w-full h-full overflow-hidden z-0 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-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"
/> />