mirror of
https://github.com/wah-su/wahs.wah.su.git
synced 2025-09-14 10:23:50 +05:00
feat: add image favorite client-side
This commit is contained in:
parent
9e754e4a88
commit
a0c54cdc0e
GPG key ID:
858E8EE696525EED
15 changed files with 541 additions and 127 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
14
src/templates/favorites.tsx
Normal file
14
src/templates/favorites.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import PageNav from "./Components/PageNavigation";
|
||||
|
||||
export default function FavoritesPage() {
|
||||
return (
|
||||
<>
|
||||
<PageNav path="/images"/>
|
||||
<div
|
||||
id="favorites_favorites"
|
||||
className="my-2 overflow-hidden grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
|
||||
></div>
|
||||
<PageNav path="/images"/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -23,7 +23,7 @@ export default function IndexPage() {
|
|||
<p className="text-4xl text-white dark:text-white bg-orange-800 dark:bg-orange-800/50 rounded-sm p-4">Videos</p>
|
||||
<div
|
||||
id="index_videos"
|
||||
className="mt-2 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
|
||||
className="mt-2 mb-4 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
|
||||
>
|
||||
{[...Array(3).keys()].map((idx) => {
|
||||
return (
|
||||
|
|
@ -35,6 +35,13 @@ export default function IndexPage() {
|
|||
})}
|
||||
<AllLink location="/videos/" text="View All Videos" />
|
||||
</div>
|
||||
<p className="text-4xl text-white dark:text-white bg-orange-800 dark:bg-orange-800/50 rounded-sm p-4">Favorites</p>
|
||||
<div
|
||||
id="index_favorites"
|
||||
className="mt-2 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
|
||||
>
|
||||
<p className="text-2xl mx-auto col-span-full">You have not added any Favorites</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue