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
112
113
114
115
116
117
118
119
120
|
import React from "react";
import { useQuery, gql } from "@apollo/client";
import { MdChevronLeft, MdChevronRight } from "react-icons/md";
import Link from "next/link";
import Image from "next/image";
const Trending = () => {
const ANIME_QUERY = gql`
query (
$id: Int
$page: Int
$perPage: Int
$search: String
$sort: [MediaSort]
) {
Page(page: $page, perPage: $perPage) {
pageInfo {
total
currentPage
lastPage
hasNextPage
perPage
}
media(id: $id, search: $search, sort: $sort, type: ANIME) {
id
idMal
title {
romaji
english
}
coverImage {
large
}
description
bannerImage
type
popularity
averageScore
}
}
}
`;
// use useQuery hook to execute query and get data
const { loading, error, data } = useQuery(ANIME_QUERY, {
variables: {
page: 1,
perPage: 15,
sort: "TRENDING_DESC",
},
});
// render component
if (loading) return <p></p>;
if (error) return <p>Error :(</p>;
const { media } = data.Page;
const slideLeft = () => {
var slider = document.getElementById("slider");
slider.scrollLeft = slider.scrollLeft - 500;
};
const slideRight = () => {
var slider = document.getElementById("slider");
slider.scrollLeft = slider.scrollLeft + 500;
};
return (
<div className="relative flex items-center gap-0 lg:gap-2">
<MdChevronLeft
onClick={slideLeft}
size={40}
className="mb-5 cursor-pointer opacity-50 hover:opacity-100"
/>
<div
id="slider"
className="scroll flex h-full w-full items-center overflow-x-scroll scroll-smooth whitespace-nowrap overflow-y-hidden scrollbar-hide lg:gap-5 "
>
{media.map((anime) => {
const url = encodeURIComponent(
anime.title.english || anime.title.romaji
);
return (
<div
key={anime.id}
className="flex shrink-0 cursor-pointer lg:items-center "
>
<Link href={`/anime/${anime.id}`}>
<Image
src={anime.coverImage.large}
alt={anime.title.romaji || anime.title.english}
width={209}
height={300}
skeleton={
<div
style={{
backgroundColor: "lightgray",
width: 209,
height: 300,
}}
/>
}
className="z-20 h-[230px] w-[168px] object-cover p-2 duration-300 ease-in-out hover:scale-105 lg:h-[290px] lg:w-[209px]"
/>
</Link>
</div>
);
})}
</div>
<MdChevronRight
onClick={slideRight}
size={40}
className="mb-5 cursor-pointer opacity-50 hover:opacity-100"
/>
</div>
);
};
export default Trending;
|