diff options
| author | Factiven <[email protected]> | 2023-07-16 22:35:39 +0700 |
|---|---|---|
| committer | Factiven <[email protected]> | 2023-07-16 22:35:39 +0700 |
| commit | 1eee181e219dfd993d396ac3169e7aad3dd285eb (patch) | |
| tree | 23fe54e9c3f8810f3ac9ab6b29070b4f0d4b9d20 /components/manga/modals/chapterModal.js | |
| parent | removed console.log (diff) | |
| download | moopa-1eee181e219dfd993d396ac3169e7aad3dd285eb.tar.xz moopa-1eee181e219dfd993d396ac3169e7aad3dd285eb.zip | |
Update v3.6.4
- Added Manga page with a working tracker for AniList user
- Added schedule component to home page
- Added disqus comment section so you can fight on each other (not recommended)
- Added /id and /en route for english and indonesian subs (id route still work in progress)
Diffstat (limited to 'components/manga/modals/chapterModal.js')
| -rw-r--r-- | components/manga/modals/chapterModal.js | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/components/manga/modals/chapterModal.js b/components/manga/modals/chapterModal.js new file mode 100644 index 0000000..ddec0e8 --- /dev/null +++ b/components/manga/modals/chapterModal.js @@ -0,0 +1,77 @@ +import { Dialog, Transition } from "@headlessui/react"; +import Link from "next/link"; +import { Fragment } from "react"; + +export default function ChapterModal({ + id, + currentId, + data, + isOpen, + setIsOpen, +}) { + function closeModal() { + setIsOpen(false); + } + + return ( + <> + <Transition appear show={isOpen} as={Fragment}> + <Dialog as="div" className="relative z-10" onClose={closeModal}> + <Transition.Child + as={Fragment} + enter="ease-out duration-100" + enterFrom="opacity-0" + enterTo="opacity-100" + leave="ease-in duration-100" + leaveFrom="opacity-100" + leaveTo="opacity-0" + > + <div className="fixed inset-0 bg-black bg-opacity-25" /> + </Transition.Child> + + <div className="fixed inset-0 overflow-y-auto"> + <div className="flex min-h-full items-center justify-center p-2 text-center"> + <Transition.Child + as={Fragment} + enter="ease-out duration-100" + enterFrom="opacity-0 scale-95" + enterTo="opacity-100 scale-100" + leave="ease-in duration-100" + leaveFrom="opacity-100 scale-100" + leaveTo="opacity-0 scale-95" + > + <Dialog.Panel className="w-full max-w-md max-h-[25rem] transform rounded-2xl bg-secondary px-3 py-4 text-left align-middle shadow-xl transition-all"> + <Dialog.Title + as="h3" + className="font-medium leading-6 text-gray-200" + > + Select a Chapter + </Dialog.Title> + <div className="bg-[#161617] rounded-lg mt-3 flex flex-col overflow-y-scroll scrollbar-thin max-h-[15rem] text-sm"> + {data && + data?.chapters?.map((c) => ( + <Link + key={c.id} + href={`/en/manga/read/${ + data.providerId + }?id=${id}&chapterId=${encodeURIComponent(c.id)}`} + className="p-2 hover:bg-[#424245] rounded-sm" + onClick={closeModal} + > + <h1 + className={`${c.id === currentId && "text-action"}`} + > + {c.title} + </h1> + </Link> + ))} + </div> + </Dialog.Panel> + </Transition.Child> + </div> + </div> + </Dialog> + </Transition> + </> + ); +} |