blob: 17acd55c1f84fbe585f409494c12b2b266af5532 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
import { ArrowLeftIcon } from "@heroicons/react/24/solid";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
export function LeftBar({ data, page, info, currentId, setSeekPage }) {
const router = useRouter();
function goBack() {
router.push(`/en/manga/${info.id}`);
}
// console.log(info);
return (
<div className="hidden lg:block shrink-0 w-[16rem] h-screen overflow-y-auto scrollbar-none bg-secondary relative group">
<div className="grid">
<button
type="button"
onClick={goBack}
className="flex items-center p-2 gap-2 line-clamp-1 cursor-pointer"
>
<ArrowLeftIcon className="w-5 h-5 shrink-0" />
<h1 className="line-clamp-1 font-semibold text-start text-sm xl:text-base">
{info?.title?.romaji}
</h1>
</button>
<div className="flex flex-col p-2 gap-2">
<div className="flex font-karla flex-col gap-2">
<h1 className="font-bold xl:text-lg">Provider</h1>
<div className="w-full px-2">
<p className="bg-[#161617] text-sm xl:text-base capitalize rounded-md py-1 px-2">
{data.providerId}
</p>
</div>
</div>
{/* Chapters */}
<div className="flex font-karla flex-col gap-2">
<h1 className="font-bold xl:text-lg">Chapters</h1>
<div className="px-2">
<div className="w-full text-sm xl:text-base px-1 h-[8rem] xl:h-[30vh] bg-[#161617] rounded-md overflow-auto scrollbar-thin scrollbar-thumb-[#363639] scrollbar-thumb-rounded-md hover:scrollbar-thumb-[#424245]">
{data?.chapters?.map((x) => {
return (
<div
key={x.id}
className={`${
x.id === currentId && "text-action"
} py-1 px-2 hover:bg-[#424245] rounded-sm`}
>
<Link
href={`/en/manga/read/${data.providerId}?id=${
info.id
}&chapterId=${encodeURIComponent(x.id)}`}
className=""
>
<h1 className="line-clamp-1">
<span className="font-bold">{x.number}.</span>{" "}
{x.title}
</h1>
</Link>
</div>
);
})}
</div>
</div>
</div>
{/* pages */}
<div className="flex font-karla flex-col gap-2">
<h1 className="font-bold xl:text-lg">Pages</h1>
<div className="px-2">
<div className="text-center w-full px-1 h-[30vh] bg-[#161617] rounded-md overflow-auto scrollbar-thin scrollbar-thumb-[#363639] scrollbar-thumb-rounded-md hover:scrollbar-thumb-[#424245]">
{Array.isArray(page) ? (
<div className="grid grid-cols-2 gap-5 py-4 px-2 place-items-center">
{page?.map((x) => {
return (
<div
key={x.url}
className="hover:bg-[#424245] cursor-pointer rounded-sm w-full"
>
<div
className="flex flex-col items-center cursor-pointer"
onClick={() => setSeekPage(x.index)}
>
<Image
src={`https://api.consumet.org/utils/image-proxy?url=${encodeURIComponent(
x.url
)}&headers=${encodeURIComponent(
JSON.stringify({ Referer: x.headers.Referer })
)}`}
alt="chapter image"
width={100}
height={200}
className="w-full h-[120px] object-contain scale-90"
/>
<h1>Page {x.index + 1}</h1>
</div>
</div>
);
})}
</div>
) : (
<div className="py-4">
<p>{page.error || "No Pages."}</p>
</div>
)}
</div>
</div>
</div>
</div>
</div>
</div>
);
}
|