added popular section (anime)

2 files changed, 55 insertions, 0 deletions

diff --git a/src/app/anime/page.jsx b/src/app/anime/page.jsx
index 1286c96..8fdbf86 100644
--- a/src/app/anime/page.jsx
+++ b/src/app/anime/page.jsx
@@ -1,6 +1,7 @@
 import styles from "./anime.module.css";

 import Trending from "./top-airing/page";

 import Releases from "./recent/page";

+import Popular from "./popular/page";

 import Input from "./search/page";

 

 export default async function Anime() {

@@ -10,6 +11,8 @@ export default async function Anime() {
 			<Trending />

 			<br />

 			<Releases />

+			<br />

+			<Popular />

 		</div>

 	);

 }

diff --git a/src/app/anime/popular/page.jsx b/src/app/anime/popular/page.jsx
new file mode 100644
index 0000000..3ddd251
--- /dev/null
+++ b/src/app/anime/popular/page.jsx
@@ -0,0 +1,52 @@
+import styles from "../top-airing/trending.module.css";
+import Image from "next/image";
+import Link from "next/link";
+import { preFetchAnimeInfo } from "../videoLinkfetcher";
+
+export default async function Popular() {
+	const data = await test();
+	preFetchAnimeInfo(data);
+
+	return (
+		<div className={styles.TrendingContainer}>
+			<div className={styles.TrendingText}>
+				<h1>Popular</h1>
+			</div>
+
+			<div className={styles.trending}>
+				{data &&
+					data.results.map((item, index) => (
+						<Link
+							key={index}
+							href={`/anime/${item.id}`}
+							style={{ textDecoration: "none", color: "white" }}
+						>
+							<div
+								className={styles.trendingEntries}
+								title={item.title}
+							>
+								<Image
+									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}
+									className={styles.trendingImage}
+									width={167}
+									height={267}
+									alt="Drama"
+									priority
+								/>
+								<p>{item.title}</p>
+							</div>
+						</Link>
+					))}
+			</div>
+		</div>
+	);
+}
+
+async function test() {
+	const res = await fetch(
+		"https://consumet-jade.vercel.app/anime/gogoanime/popular",
+		{ next: { revalidate: 21600 } }
+	);
+	const data = res.json();
+	return data;
+}