wah.su/wahs.wah.su
1
0
Fork 0
mirror of https://github.com/wah-su/wahs.wah.su.git synced 2025-09-14 18:33:50 +05:00
Code Issues Projects Releases Packages Wiki Activity

add video page

Browse source
This commit is contained in:
Kentai Radiquum 2025-02-01 17:39:37 +05:00
parent 87a27f137a
commit a2cfae043e
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
10 changed files with 338 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/templates/Components/PageNavigation.tsx
View file

@ -1,32 +1,57 @@
export default function PageNav() {
const ipp = [12,24,32,48,72,100,250,500,1000]
export default function PageNav(props: { path: string }) {
let ipp;
if (props.path == "/images") {
ipp = [12, 24, 32, 48, 72, 100, 250, 500, 1000];
} else {
ipp = [24, 48, 72, 100];
}
return (
<div className="bg-orange-800/50 rounded-sm p-2 text-white flex justify-between gap-4 items-center">
<button className="flex justify-center items-center cursor-pointer" id="nav_prev">
<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">
{ipp.map((item, idx) => {
return <button key={`ipp_${item}`}
className={`${idx > 4 ? "hidden md:block" : ""} cursor-pointer md:text-lg lg:text-xl text-gray-200`}
id="nav_ipp"
data-ipp={item}
>{item}</button>
return (
<button
key={`ipp_${item}`}
className={`${
idx > 4 ? "hidden md:block" : ""
} cursor-pointer md:text-lg lg:text-xl text-gray-200`}
id="nav_ipp"
data-ipp={item}
>
{item}
</button>
);
})}
</div>
<div className="flex">
<div className="gap-1 hidden xl:flex">
<button className="flex justify-center items-center cursor-pointer text-gray-200" id="nav_view" data-view="grid">
<div className="material-symbols--grid-on w-8 h-8"></div>
</button>
<button className="flex justify-center items-center cursor-pointer text-gray-200" id="nav_view" data-view="masonry">
<div className="material-symbols--dashboard-rounded w-8 h-8"></div>
</button>
<button
className="flex justify-center items-center cursor-pointer text-gray-200"
id="nav_view"
data-view="grid"
>
<div className="material-symbols--grid-on w-8 h-8"></div>
</button>
<button
className="flex justify-center items-center cursor-pointer text-gray-200"
id="nav_view"
data-view="masonry"
>
<div className="material-symbols--dashboard-rounded w-8 h-8"></div>
</button>
</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
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>

17
src/templates/Components/PlaceHolderVid.tsx Normal file
View file

@ -0,0 +1,17 @@
export default function PlaceholderVid(props: { isMobileHidden?: boolean }) {
return (
<video
data-type="placeholder__video"
controls={true}
className={`relative aspect-square w-full h-full max-w-48 max-h-48 sm:max-w-none sm:max-h-none rounded-sm [&:not(:fullscreen)]:object-cover ${
props.isMobileHidden ? "hidden xl:block" : ""
}`}
>
<div
data-type="placeholder__video__loader"
className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
></div>
<source className={`${props.isMobileHidden ? "hidden xl:block" : ""}`}></source>
</video>
);
}