From 31b0a59843c28ff6d339edae452b24c1daa6d251 Mon Sep 17 00:00:00 2001
From: zephex-alt <166333351+zephex-alt@users.noreply.github.com>
Date: Thu, 9 May 2024 05:52:02 +0000
Subject: added popular section (anime)

---
 src/app/anime/page.jsx                   |  3 ++
 src/app/anime/popular/page.jsx           | 52 ++++++++++++++++++++++++++++++++
 src/app/kdrama/page.jsx                  |  1 +
 src/app/kdrama/styles/popular.module.css | 18 ++++++-----
 src/app/kdrama/styles/search.module.css  |  2 +-
 5 files changed, 67 insertions(+), 9 deletions(-)
 create mode 100644 src/app/anime/popular/page.jsx

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;
+}
diff --git a/src/app/kdrama/page.jsx b/src/app/kdrama/page.jsx
index ab5ec3c..f6b417f 100644
--- a/src/app/kdrama/page.jsx
+++ b/src/app/kdrama/page.jsx
@@ -7,6 +7,7 @@ export default async function Kdrama() {
 	return (
 		<div className={styles.Main}>
 			<DramaSearch />
+			<br />
 			<PopularDramas />
 			<RecentDramas />
 		</div>
diff --git a/src/app/kdrama/styles/popular.module.css b/src/app/kdrama/styles/popular.module.css
index 20d0e73..92373a2 100644
--- a/src/app/kdrama/styles/popular.module.css
+++ b/src/app/kdrama/styles/popular.module.css
@@ -1,13 +1,15 @@
 .popDramasText {
 	color: var(--soft-purple);
-	margin-bottom: 10px;
+	margin: 10px 0 10px 0;
 	text-align: center;
 	color: transparent;
-	background: linear-gradient(90deg,
-			var(--neon-green) 40%,
-			var(--light-green) 60%,
-			var(--neon-yellow) 80%,
-			var(--soft-purple) 100%);
+	background: linear-gradient(
+		90deg,
+		var(--neon-green) 40%,
+		var(--light-green) 60%,
+		var(--neon-yellow) 80%,
+		var(--soft-purple) 100%
+	);
 	background-size: 60% 50%;
 	background-clip: text;
 }
@@ -65,7 +67,7 @@
 	.popDramasText {
 		text-align: start;
 		font-size: 26px;
-		margin-bottom: 1rem;
+		margin: 1rem 0 1rem 0;
 	}
 
 	.AnimeContainer {
@@ -78,4 +80,4 @@
 	.AnimeEntry img {
 		width: auto;
 	}
-}
\ No newline at end of file
+}
diff --git a/src/app/kdrama/styles/search.module.css b/src/app/kdrama/styles/search.module.css
index e8076f3..dbca5ad 100644
--- a/src/app/kdrama/styles/search.module.css
+++ b/src/app/kdrama/styles/search.module.css
@@ -32,7 +32,7 @@
 
 .SearchResults {
 	display: flex;
-	margin-top: 10px;
+	margin: 10px 0 10px 0;
 	overflow-x: auto;
 }
 
-- 
cgit v1.2.3