mirror of
https://github.com/wah-su/wahs.wah.su.git
synced 2025-09-14 10:23:50 +05:00
add full page image view
This commit is contained in:
parent
91bf5dc7ba
commit
79827c26cc
6 changed files with 453 additions and 0 deletions
59
src/templates/Components/ImagePageNavigation.tsx
Normal file
59
src/templates/Components/ImagePageNavigation.tsx
Normal 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>
|
||||
);
|
||||
}
|
19
src/templates/viewImage.tsx
Normal file
19
src/templates/viewImage.tsx
Normal 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>
|
||||
);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue