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

feat: add image favorite client-side

Browse source
This commit is contained in:
Kentai Radiquum 2025-02-09 23:30:11 +05:00
parent 9e754e4a88
commit a0c54cdc0e
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
15 changed files with 541 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

84
src/templates/Components/ImagePageNavigation.tsx
View file

@ -10,43 +10,55 @@ export default function ImagePageNav() {
</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 hover:text-orange-500 transition-colors"
id="fit_cover"
>
<div className="material-symbols--crop w-8 h-8"></div>
</button>
<button
className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
id="fit_contain"
>
<div className="material-symbols--fullscreen-exit w-8 h-8"></div>
</button>
<button
className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
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 hover:text-orange-500 transition-colors"
id="act_download"
>
<div className="material-symbols--download w-8 h-8"></div>
</button>
<button
className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
id="act_newtab"
>
<div className="material-symbols--open-in-new w-8 h-8"></div>
</button>
</div>
<div className="flex gap-4">
<button
className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
id="fit_cover"
>
<div className="material-symbols--crop w-8 h-8"></div>
</button>
<button
className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
id="fit_contain"
>
<div className="material-symbols--fullscreen-exit w-8 h-8"></div>
</button>
<button
className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
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 hover:text-orange-500 transition-colors"
id="act_download"
>
<div className="material-symbols--download w-8 h-8"></div>
</button>
<button
className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
id="act_newtab"
>
<div className="material-symbols--open-in-new w-8 h-8"></div>
</button>
<button
data-type="image__fav"
className="hidden w-8 h-8 cursor-pointer"
>
<div className="text-[#faebeb] hover:text-orange-500 transition-colors material-symbols--favorite-outline-rounded w-full h-full"></div>
</button>
<button
data-type="image__unfav"
className="hidden w-8 h-8 cursor-pointer"
>
<div className="text-[#faebeb] hover:text-orange-500 transition-colors material-symbols--favorite-rounded w-full h-full"></div>
</button>
</div>
</div>
<button
className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
id="nav_next"

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

@ -12,7 +12,7 @@ export default function PageNav(props: { path: string }) {
className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
id="nav_prev"
>
<div className="material-symbols--navigate-before w-16 h-16"></div>
<div className="material-symbols--navigate-before w-14 h-14"></div>
</button>
<div className="flex gap-4">
{ipp.map((item, idx) => {
@ -51,7 +51,7 @@ export default function PageNav(props: { path: string }) {
className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
id="nav_next"
>
<div className="material-symbols--navigate-next w-16 h-16"></div>
<div className="material-symbols--navigate-next w-14 h-14"></div>
</button>
</div>
</div>

32
src/templates/Components/PlaceHolder.tsx
View file

@ -1,17 +1,29 @@
export default function Placeholder(props: {
isMobileHidden?: boolean;
}) {
export default function Placeholder(props: { isMobileHidden?: boolean }) {
return (
<a
data-type="placeholder__image"
<div
data-type="placeholder__image__container"
className={`relative aspect-square min-w-48 min-h-48 sm:min-w-auto rounded-sm overflow-hidden ${
props.isMobileHidden ? "hidden xl:block" : ""
}`}
>
<div
data-type="placeholder__image__loader"
className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
></div>
</a>
<a data-type="placeholder__image">
<div
data-type="placeholder__image__loader"
className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
></div>
</a>
<button
data-type="image__fav"
className="hidden absolute right-2 top-2 w-8 h-8 cursor-pointer"
>
<div className="text-[#faebeb] hover:text-orange-500 transition-colors material-symbols--favorite-outline-rounded w-full h-full"></div>
</button>
<button
data-type="image__unfav"
className="hidden absolute right-2 top-2 w-8 h-8 cursor-pointer"
>
<div className="text-[#faebeb] hover:text-orange-500 transition-colors material-symbols--favorite-rounded w-full h-full"></div>
</button>
</div>
);
}