added popular section (anime)

5 files changed, 67 insertions, 9 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;
+}
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;

 }