features: added anime and pretty much completed it. only search functionality is left to add

4 files changed, 125 insertions, 0 deletions

diff --git a/src/app/info/[id]/page.js b/src/app/info/[id]/page.js
new file mode 100644
index 0000000..43b11ac
--- /dev/null
+++ b/src/app/info/[id]/page.js
@@ -0,0 +1,45 @@
+import "../info.css"
+import Image from "next/image";
+import CreateButton from "../buttons";
+
+export default async function AnimeInfo({params}) {
+	let animeID = params.id;
+
+	const info = await getAnimeInfo(animeID);
+
+	return (
+		<div className="dramaInfoContainer">
+			<div className="dramaInfo">
+				{info && (
+					<div>
+						<div className="titleContainer">
+							<p>{info.title}</p>
+							<Image 
+								src={info.image}
+								width={140}
+								height={190}
+								alt="Drama"
+							/>
+						</div>
+						<p className="dramaDescription">
+							{info.description}
+						</p>
+					</div>
+				)}
+
+			<div className="buttonContainer">
+				{info && info.episodes.map((item, index) => (
+					<CreateButton key={index} a={item} />
+				))}
+			</div>
+
+			</div>
+		</div>
+	)
+}
+
+async function getAnimeInfo(anime_id) {
+	const res = await fetch("https://anime-sensei-api.vercel.app/anime/gogoanime/info/" + anime_id);
+	const data = res.json();
+	return data;
+}
\ No newline at end of file
diff --git a/src/app/info/buttons.js b/src/app/info/buttons.js
new file mode 100644
index 0000000..8f041a8
--- /dev/null
+++ b/src/app/info/buttons.js
@@ -0,0 +1,13 @@
+"use client"
+
+import Link from "next/link";
+export default function CreateButton({ a }) {
+
+	return (
+		<Link href={`/video/${a.id}`}>
+			<button className="dramaButton">
+				{a.number}
+			</button>
+		</Link>
+	);
+}
\ No newline at end of file
diff --git a/src/app/info/info.css b/src/app/info/info.css
new file mode 100644
index 0000000..6d6b9b2
--- /dev/null
+++ b/src/app/info/info.css
@@ -0,0 +1,67 @@
+.dramaInfoContainer {
+	display: flex;
+	flex-direction: column;
+}
+
+.dramaInfo {
+	display: flex;
+	flex-direction: column;
+	width: 95%;
+	margin: 0px auto;
+}
+
+.titleContainer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.titleContainer p {
+	color: var(--neon-green	);
+	width: 60%;
+	font-family: "Kanit";
+	font-size: 24px;
+}
+
+.titleContainer img {
+	border-radius: 10px;
+}
+
+.dramaDescription {
+	color: #ffffff81;
+	font-family: "Lato";
+	font-size: 16px;
+	max-height: 120px;
+	margin: 20px auto;
+	text-align: center;
+	overflow-y: auto;
+}
+
+.buttonContainer {
+	margin: 5px auto;
+	text-align: center;
+	max-height: 200px;
+	overflow-y: auto;
+}
+
+.dramaButton {
+	padding: 8px;
+	font-family: "Atkinson Hyperlegible";
+	font-size: 18px;
+	margin: 5px;
+	width: 50px;
+	border-radius: 5px;
+	border: none;
+	background-color: var(--light-green);
+	cursor: pointer;
+}
+
+.dramaButton:hover {
+	background-color: var(--soft-purple);
+}
+
+@media (prefers-color-scheme: light) {
+	.dramaDescription {
+		color: black;
+	}
+}
\ No newline at end of file
diff --git a/src/app/info/page.js b/src/app/info/page.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/app/info/page.js