fix:reactive pages

This commit is contained in:
Damien Ostler 2024-06-03 22:21:19 -04:00
parent e8fa3d2ce0
commit 691292becc
3 changed files with 50 additions and 32 deletions

View File

@ -76,8 +76,8 @@ function PageComponent() {
}; };
return ( return (
<div className="w-full 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-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"> <div className="w-full flex">
<input <input
type="text" type="text"
@ -93,12 +93,12 @@ function PageComponent() {
</div> </div>
<div className="w-1/4"> <div className="w-1/4">
<button onClick={()=>{createGallery()}} className="w-full bg-success hover:bg-success-light text-white rounded-md p-2 ml-2 shadow-lg "> <button onClick={()=>{createGallery()}} className="w-full bg-success hover:bg-success-light text-white rounded-md p-2 ml-2 shadow-lg ">
Create Gallery <span></span>Create
</button> </button>
</div> </div>
</div> </div>
<div className="w-full flex"> <div className="w-full lg:flex">
<div className="w-1/2 mr-2"> <div className="w-full lg:w-1/2 mr-2">
<SearchInput <SearchInput
placeholderTags={[ placeholderTags={[
{ value: "tags", label: "❗️ click here to add tags" }, { value: "tags", label: "❗️ click here to add tags" },
@ -110,7 +110,7 @@ function PageComponent() {
tagsChanged={(tags) => { setTags(tags) }} tagsChanged={(tags) => { setTags(tags) }}
/> />
</div> </div>
<div className="w-1/2"> <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

@ -69,12 +69,17 @@ 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 p-8 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 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 value={newTagName} type="text" onChange={(e)=>{setNewTagName(e.target.value)}} className="hover:scale-105 focus:scale-105 mb-8 mr-2 rounded-md bg-info-bright p-2 w-1/2 text-black shadow-lg" placeholder="Tag Name" /> <input value={newTagName} type="text" onChange={(e)=>{setNewTagName(e.target.value)}} className="hover:scale-105 focus:scale-105 mb-8 mr-2 rounded-md bg-info-bright p-2 w-1/2 text-black 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">
Create New Tag <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" />
</svg>
<span className="lg:hidden block">Tag</span>
<span className="lg:block hidden">New Tag</span>
</button> </button>
</div> </div>
<div className="w-full flex"> <div className="w-full flex">
@ -112,7 +117,11 @@ function PageComponent() {
]} nsfwButtonEnabled={false} searchChanged={(search) => { setSearchState(search) }} nsfwChanged={(nsfw) => { setNsfwState(nsfw) }} tagsChanged={(tags) => { setTagsState(tags) }} /> ]} nsfwButtonEnabled={false} searchChanged={(search) => { setSearchState(search) }} nsfwChanged={(nsfw) => { setNsfwState(nsfw) }} tagsChanged={(tags) => { setTagsState(tags) }} />
</div> </div>
<a href="/gallery/admin/create" className="w-1/6 hover:scale-95 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"> <a href="/gallery/admin/create" className="w-1/6 hover:scale-95 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">
New Gallery <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" />
</svg>
<span className="xl:block hidden">New Gallery</span>
</a> </a>
</div> </div>
<div className="w-full h-96 overflow-y-scroll no-scrollbar"> <div className="w-full h-96 overflow-y-scroll no-scrollbar">

View File

@ -122,9 +122,9 @@ function PageComponent() {
} }
return ( return (
<div className="w-full h-screen text-white flex justify-center items-center animate-in"> <div className="w-full p-8 h-screen text-white flex justify-center items-center animate-in">
<div className="w-full lg:w-1/2 rounded-md p-12 mt-14 "> <div className="w-full lg:w-1/2 rounded-md p-12 mt-14 ">
<div className="w-full flex pb-60"> <div className="w-full lg:pt-0 pt-32 flex pb-60 justify-center"> {/* Center the gallery thumbnail */}
{gallery != null && ( {gallery != null && (
<GalleryThumbnail <GalleryThumbnail
key={"galleryThumbnail"+galleryName+"-"+tags.join("")} key={"galleryThumbnail"+galleryName+"-"+tags.join("")}
@ -146,31 +146,40 @@ function PageComponent() {
placeholder="Gallery Name" placeholder="Gallery Name"
value={galleryName} value={galleryName}
onChange={(e) => setGalleryName(e.target.value)} onChange={(e) => setGalleryName(e.target.value)}
/> /><div className="w-1/6">
<div className="w-1/6"> <button
<button onClick={() => deleteGallery()}
onClick={() => deleteGallery()} className="text-center w-full bg-error hover:bg-error-light text-white rounded-md p-2 flex items-center justify-center"
className="w-full bg-error hover:bg-error-light text-white rounded-md p-2" >
> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
Delete stroke="currentColor" className="md:hidden size-6">
</button> <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" />
</div> </svg>
<div className="w-1/6">
<button <span className="md:block hidden">Delete</span>
onClick={() => (window.location.href = "/gallery/admin")} </button>
className="w-full bg-error-dark hover:bg-error text-white rounded-md p-2 ml-2" </div>
> <div className="w-1/6">
Back <button
</button> onClick={() => (window.location.href = "/gallery/admin")}
</div> className="w-full bg-error-dark hover:bg-error text-white rounded-md p-2 ml-2 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="md:hidden size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
</svg>
<span className="md:block hidden">Back</span>
</button>
</div>
<div className="w-1/4"> <div className="w-1/4">
<button onClick={()=>{updateGallery()}} className="w-full bg-success hover:bg-success-light text-white rounded-md p-2 ml-4"> <button onClick={()=>{updateGallery()}} className="w-full bg-success hover:bg-success-light text-white rounded-md p-2 ml-4">
Save <span>Save</span>
</button> </button>
</div> </div>
</div> </div>
<div className="w-full 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-1/2 mr-2"> <div className="w-full lg:w-1/2 mr-8">
{gallery &&( {gallery &&(
<SearchInput <SearchInput
placeholderTags={[ placeholderTags={[
@ -184,7 +193,7 @@ function PageComponent() {
/> />
)} )}
</div> </div>
<div className="w-1/2"> <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=>{
setNsfw(e.target.value == "NSFW"); setNsfw(e.target.value == "NSFW");