add full page image view

This commit is contained in:
Kentai Radiquum 2025-02-02 04:17:59 +05:00
parent 91bf5dc7ba
commit 79827c26cc
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
6 changed files with 453 additions and 0 deletions

View file

@ -0,0 +1,59 @@
export default function ImagePageNav() {
return (
<div className="bg-orange-800/50 rounded-sm p-2 text-white">
<div className="flex gap-4 justify-between items-center">
<button
className="flex justify-center items-center cursor-pointer"
id="nav_prev"
>
<div className="material-symbols--navigate-before w-16 h-16"></div>
</button>
<div className="flex gap-4 md:gap-8 flex-col md:flex-row">
<div className="flex gap-4">
<button
className="flex justify-center items-center cursor-pointer"
id="fit_cover"
>
<div className="material-symbols--crop w-8 h-8"></div>
</button>
<button
className="flex justify-center items-center cursor-pointer"
id="fit_contain"
>
<div className="material-symbols--fullscreen-exit w-8 h-8"></div>
</button>
<button
className="flex justify-center items-center cursor-pointer"
id="fit_full"
>
<div className="material-symbols--open-in-full w-8 h-8"></div>
</button>
</div>
<div className="flex gap-4">
<button
className="flex justify-center items-center cursor-pointer"
id="act_download"
>
<div className="material-symbols--download w-8 h-8"></div>
</button>
<button
className="flex justify-center items-center cursor-pointer"
id="act_newtab"
>
<div className="material-symbols--open-in-new w-8 h-8"></div>
</button>
</div>
</div>
<button
className="flex justify-center items-center cursor-pointer"
id="nav_next"
>
<div className="material-symbols--navigate-next w-16 h-16"></div>
</button>
</div>
</div>
);
}

View file

@ -0,0 +1,19 @@
import ImagePageNav from "./Components/ImagePageNavigation";
export default function ImagePage() {
return (
<div className="flex flex-col gap-4 mb-4">
<ImagePageNav />
<div
data-type="placeholder__image"
className="relative w-full rounded-sm aspect-video overflow-hidden bg-black"
>
<div
data-type="placeholder__image__loader"
className="w-full h-full absolute inset-0 bg-gray-400/50 opacity-30 animate-pulse z-[3]"
></div>
</div>
<ImagePageNav />
</div>
);
}