diff options
| author | Factiven <[email protected]> | 2023-09-25 00:44:40 +0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2023-09-25 00:44:40 +0700 |
| commit | 1a85c2571690ba592ac5183d5eadaf9846fe532b (patch) | |
| tree | 3f3552c00cd49c0eeab5275275cf5cf5666e5027 /components/anime/viewSelector.js | |
| parent | Delete .github/workflows/deploy.yml (diff) | |
| download | moopa-4.1.0.tar.xz moopa-4.1.0.zip | |
Update v4.1.0 (#79)v4.1.0
* Update v4.1.0
* Update pages/_app.js
Diffstat (limited to 'components/anime/viewSelector.js')
| -rw-r--r-- | components/anime/viewSelector.js | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/components/anime/viewSelector.js b/components/anime/viewSelector.js new file mode 100644 index 0000000..f114a8b --- /dev/null +++ b/components/anime/viewSelector.js @@ -0,0 +1,123 @@ +export default function ViewSelector({ view, setView, episode, map }) { + return ( + <div className="flex gap-3 rounded-sm items-center p-2"> + <div + className={ + episode?.length > 0 + ? map?.every( + (item) => + item?.img?.includes("https://s4.anilist.co/") || + item?.image?.includes("https://s4.anilist.co/") || + item.title === null + ) || !map + ? "pointer-events-none" + : "cursor-pointer" + : "pointer-events-none" + } + onClick={() => { + setView(1); + localStorage.setItem("view", 1); + }} + > + <svg + xmlns="http://www.w3.org/2000/svg" + width="31" + height="20" + fill="none" + viewBox="0 0 31 20" + > + <rect + width="31" + height="20" + className={`${ + episode?.length > 0 + ? map?.every( + (item) => + item?.img?.includes("https://s4.anilist.co/") || + item?.image?.includes("https://s4.anilist.co/") || + item.title === null + ) || !map + ? "fill-[#1c1c22]" + : view === 1 + ? "fill-action" + : "fill-[#3A3A44]" + : "fill-[#1c1c22]" + }`} + rx="3" + ></rect> + </svg> + </div> + <div + className={ + episode?.length > 0 + ? map?.every( + (item) => + item?.img?.includes("https://s4.anilist.co/") || + item?.image?.includes("https://s4.anilist.co/") || + item.title === null + ) || !map + ? "pointer-events-none" + : "cursor-pointer" + : "pointer-events-none" + } + onClick={() => { + setView(2); + localStorage.setItem("view", 2); + }} + > + <svg + xmlns="http://www.w3.org/2000/svg" + width="33" + height="20" + fill="none" + className={`${ + episode?.length > 0 + ? map?.every( + (item) => + item?.img?.includes("https://s4.anilist.co/") || + item?.image?.includes("https://s4.anilist.co/") || + item.title === null + ) || !map + ? "fill-[#1c1c22]" + : view === 2 + ? "fill-action" + : "fill-[#3A3A44]" + : "fill-[#1c1c22]" + }`} + viewBox="0 0 33 20" + > + <rect width="33" height="7" y="1" rx="3"></rect> + <rect width="33" height="7" y="12" rx="3"></rect> + </svg> + </div> + <div + className={ + episode?.length > 0 ? `cursor-pointer` : "pointer-events-none" + } + onClick={() => { + setView(3); + localStorage.setItem("view", 3); + }} + > + <svg + xmlns="http://www.w3.org/2000/svg" + width="33" + height="20" + fill="none" + className={`${ + episode?.length > 0 + ? view === 3 + ? "fill-action" + : "fill-[#3A3A44]" + : "fill-[#1c1c22]" + }`} + viewBox="0 0 33 20" + > + <rect width="29" height="4" x="2" y="2" rx="2"></rect> + <rect width="29" height="4" x="2" y="8" rx="2"></rect> + <rect width="16" height="4" x="2" y="14" rx="2"></rect> + </svg> + </div> + </div> + ); +} |