aboutsummaryrefslogtreecommitdiff
path: root/components/manga/modals
diff options
context:
space:
mode:
Diffstat (limited to 'components/manga/modals')
-rw-r--r--components/manga/modals/chapterModal.js77
-rw-r--r--components/manga/modals/shortcutModal.js197
2 files changed, 274 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>
+ </>
+ );
+}
diff --git a/components/manga/modals/shortcutModal.js b/components/manga/modals/shortcutModal.js
new file mode 100644
index 0000000..28790a1
--- /dev/null
+++ b/components/manga/modals/shortcutModal.js
@@ -0,0 +1,197 @@
+import { Dialog, Transition } from "@headlessui/react";
+import {
+ ArrowSmallDownIcon,
+ ArrowSmallLeftIcon,
+ ArrowSmallRightIcon,
+ ArrowSmallUpIcon,
+} from "@heroicons/react/24/solid";
+import { Fragment } from "react";
+
+export default function ShortCutModal({ 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-300"
+ enterFrom="opacity-0"
+ enterTo="opacity-100"
+ leave="ease-in duration-200"
+ leaveFrom="opacity-100"
+ leaveTo="opacity-0"
+ >
+ <div className="fixed inset-0 bg-black bg-opacity-50" />
+ </Transition.Child>
+
+ <div className="fixed inset-0 overflow-y-auto">
+ <div className="flex min-h-full items-center justify-center p-4 text-center">
+ <Transition.Child
+ as={Fragment}
+ enter="ease-out duration-300"
+ enterFrom="opacity-0 scale-95"
+ enterTo="opacity-100 scale-100"
+ leave="ease-in duration-200"
+ leaveFrom="opacity-100 scale-100"
+ leaveTo="opacity-0 scale-95"
+ >
+ <Dialog.Panel className="w-full max-w-lg transform overflow-hidden rounded-2xl bg-secondary p-6 text-left align-middle shadow-xl transition-all">
+ <Dialog.Title
+ as="h3"
+ className="flex gap-2 items-center text-xl font-semibold leading-6 text-gray-100"
+ >
+ Keyboard Shortcuts{" "}
+ <div className="flex gap-2 text-white text-xs">
+ <div className="bg-[#424245] text-white px-2 py-1 shadow-md shadow-[#141415] rounded-md">
+ CTRL
+ </div>
+ <div className="bg-[#424245] text-white px-2 py-1 shadow-md shadow-[#141415] rounded-md">
+ /
+ </div>
+ </div>
+ </Dialog.Title>
+ <div className="mt-3 w-full bg-gray-500 h-[1px]" />
+ <div className="mt-2 flex flex-col flex-wrap gap-10">
+ <div className="space-y-1">
+ <label className="text-gray-100 font-bold">
+ VERTICAL
+ </label>
+ <p className="text-sm text-gray-400">
+ these shorcuts only work when focused on vertical mode.
+ </p>
+ <div className="space-y-2">
+ <div className="space-y-2">
+ <label className="text-gray-400 text-sm font-karla font-extrabold">
+ SCROLL
+ </label>
+ <div className="flex gap-2">
+ <div className="bg-[#424245] text-white px-2 py-1 shadow-md shadow-[#141415] rounded-md">
+ <ArrowSmallUpIcon className="w-5 h-5" />
+ </div>
+ <div className="bg-[#424245] text-white px-2 py-1 shadow-md shadow-[#141415] rounded-md">
+ <ArrowSmallDownIcon className="w-5 h-5" />
+ </div>
+ </div>
+ </div>
+ <div className="space-y-2">
+ <label className="text-gray-400 text-sm font-karla font-extrabold">
+ SCALE IMAGE
+ </label>
+ <div className="flex items-center gap-2">
+ <div className="flex items-center gap-2">
+ <div className="bg-[#424245] text-white text-sm font-bold px-2 py-1 shadow-md shadow-[#141415] rounded-md">
+ <span>SHIFT</span>
+ </div>
+ <div className="bg-[#424245] text-white px-2 py-1 shadow-md shadow-[#141415] rounded-md">
+ <ArrowSmallUpIcon className="w-5 h-5" />
+ </div>
+ </div>
+ <div className="font-bold text-gray-400 text-sm">
+ |
+ </div>
+ <div className="flex items-center gap-2">
+ <div className="bg-[#424245] text-white text-sm font-bold px-2 py-1 shadow-md shadow-[#141415] rounded-md">
+ <span>SHIFT</span>
+ </div>
+ <div className="bg-[#424245] text-white px-2 py-1 shadow-md shadow-[#141415] rounded-md">
+ <ArrowSmallDownIcon className="w-5 h-5" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ {/* Right to Left */}
+ <div className="space-y-1">
+ <label className="text-gray-100 font-bold">
+ RIGHT TO LEFT
+ </label>
+ {/* <p className="text-sm text-gray-400 w-[18rem]">
+ these shorcuts only work when focused on Right to Left
+ mode.
+ </p> */}
+ <div className="space-y-2">
+ <label className="text-gray-400 text-sm font-karla font-extrabold uppercase">
+ Navigate Through Panels
+ </label>
+ <div className="flex gap-2">
+ <div className="bg-[#424245] text-white px-2 py-1 shadow-md shadow-[#141415] rounded-md">
+ <ArrowSmallLeftIcon className="w-5 h-5" />
+ </div>
+ <div className="bg-[#424245] text-white px-2 py-1 shadow-md shadow-[#141415] rounded-md">
+ <ArrowSmallRightIcon className="w-5 h-5" />
+ </div>
+ </div>
+ </div>
+ </div>
+
+ {/* works anywhere */}
+ <div className="space-y-3">
+ <label className="text-gray-100 font-bold">
+ WORKS ANYWHERE
+ </label>
+
+ <div className="space-y-4">
+ <div className="space-y-2">
+ <label className="text-gray-400 text-sm font-karla font-extrabold uppercase">
+ Navigate Through Chapters
+ </label>
+ <div className="flex items-center gap-2">
+ <div className="flex items-center gap-2">
+ <div className="bg-[#424245] text-white text-sm font-bold px-2 py-1 shadow-md shadow-[#141415] rounded-md">
+ <span>CTRL</span>
+ </div>
+ <div className="bg-[#424245] text-white px-2 py-1 shadow-md shadow-[#141415] rounded-md">
+ <ArrowSmallLeftIcon className="w-5 h-5" />
+ </div>
+ </div>
+ <div className="font-bold text-gray-400 text-sm">
+ |
+ </div>
+ <div className="flex items-center gap-2">
+ <div className="bg-[#424245] text-white text-sm font-bold px-2 py-1 shadow-md shadow-[#141415] rounded-md">
+ <span>CTRL</span>
+ </div>
+ <div className="bg-[#424245] text-white px-2 py-1 shadow-md shadow-[#141415] rounded-md">
+ <ArrowSmallRightIcon className="w-5 h-5" />
+ </div>
+ </div>
+ </div>
+ </div>
+ <div className="space-y-2">
+ <label className="text-gray-400 text-sm font-karla font-extrabold uppercase">
+ Show/Hide SideBar
+ </label>
+ <div className="flex">
+ <div className="bg-[#424245] text-white text-sm font-bold px-2 py-1 shadow-md shadow-[#141415] rounded-md">
+ F
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div className="mt-4 text-right">
+ <button
+ type="button"
+ className="inline-flex justify-center rounded-md border border-transparent bg-orange-100 px-4 py-2 text-sm font-medium text-orange-900 hover:bg-orange-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-orange-500 focus-visible:ring-offset-2"
+ onClick={closeModal}
+ >
+ Got it, thanks!
+ </button>
+ </div>
+ </Dialog.Panel>
+ </Transition.Child>
+ </div>
+ </div>
+ </Dialog>
+ </Transition>
+ </>
+ );
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-23 16:09:36 +0000