1 files changed, 51 insertions, 0 deletions
diff --git a/src/app/anime/components/popularAnimes.jsx b/src/app/anime/components/popularAnimes.jsx
new file mode 100644
index 0000000..2259a42
--- /dev/null
+++ b/src/app/anime/components/popularAnimes.jsx
@@ -0,0 +1,51 @@
+import Link from "next/link";
+import Image from "next/image";
+import { Atkinson_Hyperlegible } from "next/font/google";
+
+import styles from "../styles/pop_recent_top.module.css";
+import { popular, anime_info } from "../data-fetch/request";
+import { preFetchAnimeInfo, preFetchVideoLinks } from "./cacher";
+
+const atkinson = Atkinson_Hyperlegible({ subsets: ["latin"], weight: "400" });
+
+const PopularAnimes = async () => {
+	const data = await popular();
+
+	preFetchAnimeInfo(data);
+
+	return (
+		<main className={styles.Main}>
+			<section>
+				<h2 className={styles.AnimeHeaderText}>Popular Animes</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={atkinson.className}
+								title={item.title}
+							>
+								<section className={styles.AnimeEntry}>
+									<Image
+										src={item.image}
+										width={167}
+										height={267}
+										alt="Anime Poster Image"
+									/>
+									<p>{item.title}</p>
+								</section>
+							</Link>
+						))}
+				</div>
+			</section>
+		</main>
+	);
+};
+
+export default PopularAnimes;