blob: 7e2d9ab7d93ab8e45694ae9d50bcc07e0f0e9822 (
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
|
import Link from "next/link";
import React, { useState } from "react";
import Image from "next/image";
import { MdChevronLeft, MdChevronRight } from "react-icons/md";
export default function Content({ ids, section, data }) {
const [scrollLeft, setScrollLeft] = useState(false);
const [scrollRight, setScrollRight] = useState(true);
const slideLeft = () => {
var slider = document.getElementById(ids);
slider.scrollLeft = slider.scrollLeft - 500;
};
const slideRight = () => {
var slider = document.getElementById(ids);
slider.scrollLeft = slider.scrollLeft + 500;
};
const handleScroll = (e) => {
const scrollLeft = e.target.scrollLeft > 31;
const scrollRight =
e.target.scrollLeft < e.target.scrollWidth - e.target.clientWidth;
setScrollLeft(scrollLeft);
setScrollRight(scrollRight);
};
// console.log({ left: scrollLeft, right: scrollRight });
const array = data;
let filteredData = array?.filter((item) => item !== null);
return (
<div>
<h1 className="px-5 font-karla text-[20px] font-bold">{section}</h1>
<div className="relative flex items-center lg:gap-2">
<MdChevronLeft
onClick={slideLeft}
size={35}
className={`mb-5 cursor-pointer hover:text-action absolute left-0 bg-gradient-to-r from-[#141519] z-40 h-full hover:opacity-100 ${
scrollLeft ? "visible" : "hidden"
}`}
/>
<div
id={ids}
className="scroll flex h-full w-full items-center select-none overflow-x-scroll scroll-smooth whitespace-nowrap overflow-y-hidden scrollbar-hide lg:gap-8 gap-5 p-10 z-30 "
onScroll={handleScroll}
>
{filteredData?.map((anime) => {
return (
<div
key={anime.id}
className="flex shrink-0 cursor-pointer items-center"
>
<Link
href={`/anime/${anime.id}`}
className="hover:scale-105 group relative duration-300 ease-in-out"
>
<Image
draggable={false}
src={
anime.image ||
anime.coverImage?.extraLarge ||
anime.coverImage?.large ||
"https://cdn.discordapp.com/attachments/986579286397964290/1058415946945003611/gray_pfp.png"
}
alt={anime.title.romaji || anime.title.english}
width={209}
height={300}
placeholder="blur"
blurDataURL={
anime.image ||
anime.coverImage?.extraLarge ||
anime.coverImage?.large ||
"https://cdn.discordapp.com/attachments/986579286397964290/1058415946945003611/gray_pfp.png"
}
className="z-20 h-[192px] w-[135px] lg:h-[265px] lg:w-[185px] object-cover rounded-md"
/>
</Link>
</div>
);
})}
</div>
<MdChevronRight
onClick={slideRight}
size={30}
className={`mb-5 cursor-pointer hover:text-action absolute right-0 bg-gradient-to-l from-[#141519] z-40 h-full hover:opacity-100 hover:bg-gradient-to-l ${
scrollRight ? "visible" : "hidden"
}`}
/>
</div>
</div>
);
}
|