aboutsummaryrefslogtreecommitdiff
path: root/src/app/anime/components/recentEpisodes.jsx
blob: 9e7899ff2d9596803b5553ba7b71ade2ffcda921 (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
import Link from "next/link";
import Image from "next/image";
import { Lexend_Deca } from "next/font/google";

import styles from "../styles/pop_recent_top.module.css";
import { recent } from "../data-fetch/request";
import { preFetchAnimeInfo } from "./cacher";

const lexend = Lexend_Deca({ subsets: ["latin"], weight: "400" });

const RecentAnimes = async () => {
	const data = await recent();

	preFetchAnimeInfo(data);

	return (
		<main className={styles.Main}>
			<section>
				<h2 className={styles.AnimeHeaderText}>Recent Releases</h2>
				<div className={styles.AnimeContainer}>
					{data &&
						data.results.map((item, index) => (
							<Link
								key={index}
								href={`/anime/${item.id}`}
								shallow
								style={{
									color: "white",
									textDecoration: "none",
								}}
								className={lexend.className}
								title={item.title}
							>
								<section className={styles.AnimeEntry}>
									<Image
										src={item.image}
										width={180}
										height={300}
										alt="Anime Poster Image"
									/>
									<p className={styles.AnimeTitle}>
										{item.title}
									</p>
									<p className={styles.AnimeReleasedEpisode}>{item.episodeNumber}</p>
								</section>
							</Link>
						))}
				</div>
			</section>
		</main>
	);
};

export default RecentAnimes;