fix: gallery pages

This commit is contained in:
Damien Ostler 2024-06-08 18:45:28 -04:00
parent a9968ccb03
commit 7635178e3c
5 changed files with 52 additions and 30 deletions

View File

@ -12,7 +12,6 @@ function PageComponent() {
const response = await fetch('/api/tiers'); const response = await fetch('/api/tiers');
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
console.log(data)
setTiers(data); setTiers(data);
} else { } else {
console.error('Failed to fetch users'); console.error('Failed to fetch users');

View File

@ -19,7 +19,6 @@ function PageComponent() {
const response = await fetch('/api/tiers/'+name); const response = await fetch('/api/tiers/'+name);
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
console.log(data)
setTier(data); setTier(data);
setName(data.name); setName(data.name);
setPrice(data.price); setPrice(data.price);

View File

@ -77,6 +77,9 @@ function PageComponent() {
return ( return (
<div className="w-full p-8 text-white flex justify-center items-center animate-in"> <div className="w-full p-8 text-white flex justify-center items-center animate-in">
<div className="w-full lg:w-1/2 rounded-md bg-primary opacity-90 backdrop-blur-lg p-12 mt-32 shadow-lg"> <div className="w-full lg:w-1/2 rounded-md bg-primary opacity-90 backdrop-blur-lg p-12 mt-32 shadow-lg">
<div className="w-full flex pb-4">
<span className="text-2xl">Creating New Gallery</span>
</div>
<div className="w-full flex"> <div className="w-full flex">
<input <input
type="text" type="text"
@ -98,6 +101,7 @@ function PageComponent() {
</div> </div>
<div className="w-full lg:flex"> <div className="w-full lg:flex">
<div className="w-full lg:w-1/2 mr-2"> <div className="w-full lg:w-1/2 mr-2">
<div className="absolute">
<SearchInput <SearchInput
placeholderTags={[ placeholderTags={[
{ value: "tags", label: "❗️ click here to add tags" }, { value: "tags", label: "❗️ click here to add tags" },
@ -109,6 +113,7 @@ function PageComponent() {
tagsChanged={(tags) => { setTags(tags) }} tagsChanged={(tags) => { setTags(tags) }}
/> />
</div> </div>
</div>
<div className="w-full lg:w-1/2 lg:pt-0 pt-4"> <div className="w-full lg:w-1/2 lg:pt-0 pt-4">
<select value={nsfw ? "NSFW" : "SFW"} className="mb-2 shadow-lg rounded-md bg-secondary p-2 w-full text-white" onChange={e=>{ <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"); setNsfw(e.target.value === "NSFW");

View File

@ -62,11 +62,14 @@ function PageComponent() {
return ( return (
<div className="w-full p-8 h-max text-white lg:flex justify-center items-center animate-in"> <div className="w-full p-8 h-max text-white lg:flex justify-center items-start animate-in mt-32">
<div className="w-full h-max lg:w-1/3 rounded-md bg-primary opacity-90 p-12 m-1 mt-32 shadow-lg backdrop-blur"> <div className="w-full h-max lg:w-1/3 rounded-md bg-primary opacity-90 p-4 m-1 shadow-lg backdrop-blur">
<div className="w-full flex"> <span className="text-2xl">Tags Management</span>
<input value={newTagName} type="text" onChange={(e)=>{setNewTagName(e.target.value)}} className=" mb-8 mr-2 rounded-md bg-info-bright p-2 w-1/2 text-black shadow-lg" placeholder="Tag Name" /> <div className="w-full flex pt-4">
<button onClick={createTag} className=" 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"> <form onSubmit={createTag} className="flex w-full">
<input value={newTagName} required type="text" onChange={(e)=>{setNewTagName(e.target.value)}} className=" mb-8 mr-2 rounded-md bg-info-bright p-2 w-1/2 text-black shadow-lg" placeholder="Tag Name" />
<button className=" 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">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="lg:hidden size-6"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="lg:hidden size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg> </svg>
@ -74,6 +77,7 @@ function PageComponent() {
<span className="lg:hidden block">Tag</span> <span className="lg:hidden block">Tag</span>
<span className="lg:block hidden">New Tag</span> <span className="lg:block hidden">New Tag</span>
</button> </button>
</form>
</div> </div>
<div className="w-full flex"> <div className="w-full flex">
<input type="text" value={tagSearch} onChange={(e)=>{setTagSearch(e.target.value)}} className=" mb-8 shadow-lg mr-2 rounded-md bg-info-bright p-2 w-full text-black" placeholder="Search all tags by name" /> <input type="text" value={tagSearch} onChange={(e)=>{setTagSearch(e.target.value)}} className=" mb-8 shadow-lg mr-2 rounded-md bg-info-bright p-2 w-full text-black" placeholder="Search all tags by name" />
@ -88,8 +92,8 @@ function PageComponent() {
<td className="px-4 py-2">{item.name}</td> <td className="px-4 py-2">{item.name}</td>
<td className="px-4 py-2"> <td className="px-4 py-2">
<button onClick={()=>{deleteTag(item.name)}} className=" bg-error shadow-lg hover:bg-error-light text-white font-bold py-2 px-4 rounded float-right"> <button onClick={()=>{deleteTag(item.name)}} className=" bg-error shadow-lg hover:bg-error-light text-white font-bold py-2 px-4 rounded float-right">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6"> <svg xmlns="http://www.w3.org/2000/svg" fill="</button>none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /> <path strokeLinecap="round" strokeLinejoin="ro</svg>und" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg> </svg>
</button> </button>
@ -100,16 +104,18 @@ function PageComponent() {
</table> </table>
</div> </div>
</div> </div>
<div className="w-full h-max lg:w-1/2 rounded-md bg-primary opacity-90 backdrop-blur-lg p-4 shadow-lg"> <div className="w-full h-max lg:w-1/2 rounded-md bg-primary opacity-90 backdrop-blur-lg p-4 m-1 shadow-lg">
<div className="w-full pb-2 flex"> <div className="w-full pb-2 flex justify-between">
<div className="fixed w-4/5 z-20"> <span className="text-2xl">Galleries Management</span>
<SearchInput <div>
startingTags={[]} <button onClick={()=>{router.push("/admin/")}} className="ml-2 p-2 shadow-lg h-10 text-center bg-error hover:bg-error-light text-white font-bold rounded">
placeholderTags={[ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="xl:hidden size-6">
{ value: "tags", label: "❗️ click here to add tags to search" } <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
]} nsfwButtonEnabled={false} searchChanged={(search) => { setSearchState(search) }} nsfwChanged={(nsfw) => { setNsfwState(nsfw) }} tagsChanged={(tags) => { setTagsState(tags) }} /> </svg>
</div>
<button onClick={()=>{router.push("/gallery/admin/create")}} className="right-0 mr-2 mt-2 fixed w-1/6 ml-2 p-2 shadow-lg h-10 text-center bg-success hover:bg-success-light text-white font-bold rounded flex items-center justify-center"> <span className="xl:block hidden">Back</span>
</button>
<button onClick={()=>{router.push("/gallery/admin/create")}} className="ml-2 p-2 shadow-lg h-10 text-center bg-success hover:bg-success-light text-white font-bold rounded">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="xl:hidden size-6"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="xl:hidden size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg> </svg>
@ -117,6 +123,16 @@ function PageComponent() {
<span className="xl:block hidden">New Gallery</span> <span className="xl:block hidden">New Gallery</span>
</button> </button>
</div> </div>
</div>
<div className="w-full pb-2 flex">
<div className="absolute w-full z-20 pr-8">
<SearchInput
startingTags={[]}
placeholderTags={[
{ value: "tags", label: "❗️ click here to add tags to search" }
]} nsfwButtonEnabled={false} searchChanged={(search) => { setSearchState(search) }} nsfwChanged={(nsfw) => { setNsfwState(nsfw) }} tagsChanged={(tags) => { setTagsState(tags) }} />
</div>
</div>
<div className="w-full h-96 overflow-y-scroll no-scrollbar"> <div className="w-full h-96 overflow-y-scroll no-scrollbar">
<table className="w-full mt-20 bg-primary-light rounded"> <table className="w-full mt-20 bg-primary-light rounded">
<tbody> <tbody>

View File

@ -179,7 +179,9 @@ function PageComponent() {
</div> </div>
</div> </div>
<div className="w-full lg:flex opacity-90 backdrop-blur-lg bg-primary shadow-lg p-8 pt-0 rounded"> <div className="w-full lg:flex opacity-90 backdrop-blur-lg bg-primary shadow-lg p-8 pt-0 rounded">
<div className="w-full lg:w-1/2 mr-8"> <div className="w-full lg:w-1/2 mr-44">
<div className="w-1/2 fixed mr-8">
{gallery &&( {gallery &&(
<SearchInput <SearchInput
placeholderTags={[ placeholderTags={[
@ -193,6 +195,7 @@ function PageComponent() {
/> />
)} )}
</div> </div>
</div>
<div className="w-full lg:w-1/2 pt-4"> <div className="w-full lg:w-1/2 pt-4">
{gallery != null && (<> {gallery != null && (<>
<select value={nsfw ? "NSFW" : "SFW"} className="mb-2 shadow-lg rounded-md bg-secondary p-2 w-full text-white" onChange={e=>{ <select value={nsfw ? "NSFW" : "SFW"} className="mb-2 shadow-lg rounded-md bg-secondary p-2 w-full text-white" onChange={e=>{