feature added: search anime by title

10 files changed, 189 insertions, 10 deletions

diff --git a/src/app/anime/page.js b/src/app/anime/page.js
index 964bba5..06ea86f 100644
--- a/src/app/anime/page.js
+++ b/src/app/anime/page.js
@@ -1,10 +1,12 @@
 import './anime.css'
 import Trending from '../top-airing/page'
 import Releases from '../recent/page'
+import Input from '../search/page'
 
 export default async function Anime() {
 	return (
 		<div>
+			<Input />
 			<Trending />
 			<Releases />	
 		</div>
diff --git a/src/app/info/[id]/page.js b/src/app/info/[id]/page.js
index 43b11ac..9d37819 100644
--- a/src/app/info/[id]/page.js
+++ b/src/app/info/[id]/page.js
@@ -27,11 +27,11 @@ export default async function AnimeInfo({params}) {
 					</div>
 				)}
 
-			<div className="buttonContainer">
-				{info && info.episodes.map((item, index) => (
-					<CreateButton key={index} a={item} />
-				))}
-			</div>
+				<div className="buttonContainer">
+					{info && info.episodes.map((item, index) => (
+						<CreateButton key={index} a={item} />
+					))}
+				</div>
 
 			</div>
 		</div>
diff --git a/src/app/info/info.css b/src/app/info/info.css
index 6d6b9b2..cf24758 100644
--- a/src/app/info/info.css
+++ b/src/app/info/info.css
@@ -60,8 +60,24 @@
 	background-color: var(--soft-purple);
 }
 
+.infoPageContainer {
+	display: flex;
+	height: 100dvh;
+	justify-content: center;
+	align-items: center;
+}
+
+.infoPageContainer p {
+	color: white;
+}
+
 @media (prefers-color-scheme: light) {
 	.dramaDescription {
 		color: black;
 	}
+
+	.infoPageContainer p {
+		color: black;
+	}
+	
 }
\ No newline at end of file
diff --git a/src/app/info/page.js b/src/app/info/page.js
index 6353b1a..1468652 100644
--- a/src/app/info/page.js
+++ b/src/app/info/page.js
@@ -1,7 +1,11 @@
+import './info.css'
+
 export default function Info() {
 	return (
-		<h2>
-			Hello
-		</h2>
+		<div className='infoPageContainer'>
+			<p>
+				This is the anime info page. This page will display information about the queried anime when anime id is passed along the url.
+			</p>
+		</div>
 	)
 }
\ No newline at end of file
diff --git a/src/app/kdrama/kdrama.css b/src/app/kdrama/kdrama.css
index 4e0754c..014083e 100644
--- a/src/app/kdrama/kdrama.css
+++ b/src/app/kdrama/kdrama.css
@@ -89,6 +89,7 @@
 
 .popupEntry img {
 	width: 120px;
+	height: "auto";
 	padding: 5px;
 	border-radius: 10px;
 
diff --git a/src/app/kdrama/page.js b/src/app/kdrama/page.js
index 3f0eee6..fdd42c7 100644
--- a/src/app/kdrama/page.js
+++ b/src/app/kdrama/page.js
@@ -61,9 +61,9 @@ export default function Kdrama() {
 				<p className="introText">
 					Start by searching for some dramas
 				</p>
-				<h7 className="introText2">
+				<p className="introText2">
 					Look for the search box above.
-				</h7>
+				</p>
 			</div>
 
 			<div className="videoContainer" id="videoContainer">
diff --git a/src/app/recent/page.js b/src/app/recent/page.js
index 6f4e3cd..0cefca5 100644
--- a/src/app/recent/page.js
+++ b/src/app/recent/page.js
@@ -22,6 +22,7 @@ export default async function Releases() {
 								width={160}
 								height={220}
 								alt="Drama"
+								priority
 							/>
 							<p>
 								{item.title}
diff --git a/src/app/search/page.js b/src/app/search/page.js
new file mode 100644
index 0000000..cb571b3
--- /dev/null
+++ b/src/app/search/page.js
@@ -0,0 +1,75 @@
+"use client"
+
+import './search.css'
+import { FaSearch } from 'react-icons/fa'; // Import the search icon from react-icons library
+import { useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function Input() {
+
+	const [searchedAnime, setSearchedAnime] = useState(null)
+
+	const handleKeyPress = (event) => {
+		if (
+			(event.code === "Enter" || 
+			event.key === "Enter" || 
+			event.code === 13) && 
+			searchedAnime != ""
+		) {
+			fetch_animes(searchedAnime)
+		} else if (
+			(event.code === "Enter" || 
+			event.key === "Enter" || 
+			event.code === 13) &&
+			searchedAnime === ""
+			) {
+			alert("Input cannot be empty")
+		}
+	}
+
+	const [search1, setSearch] = useState(null);
+	const fetch_animes = (title) => {
+		fetch("https://dramalama-api.vercel.app/anime/gogoanime/" + title)
+			.then(res => res.json())
+			.then(
+				data => {
+					setSearch(data)
+					console.log(search1)
+				}
+			)
+	}
+
+	return (
+		<div>
+			<div className='inputContainer'>
+				<div className='searchContainer'>
+					<FaSearch className='searchIcon' />
+					<input 
+						onChange={(event) => setSearchedAnime(event.target.value)}
+						onKeyDown={(event) => handleKeyPress(event)}
+						placeholder='Enter anime title'>
+						
+					</input>
+				</div>
+			</div>
+
+			<div className='animeEntry'>
+				{search1 && search1.results.map((item, index) => (
+					<Link href={`/info/${item.id}`} style={{textDecoration: "none"}}>
+						<div key={index} className='anime'>
+							<p>{item.title}</p>
+							<Image 
+								src={item.image}
+								className='animeImage'
+								width={120}
+								height={160}
+							/>
+						</div>
+					</Link>
+				))}
+			</div>
+		</div>
+
+	)
+}
\ No newline at end of file
diff --git a/src/app/search/search.css b/src/app/search/search.css
new file mode 100644
index 0000000..d24293e
--- /dev/null
+++ b/src/app/search/search.css
@@ -0,0 +1,79 @@
+.inputContainer {
+	display: flex;
+	margin: 30px auto;
+}
+
+.searchContainer input {
+	border: none;
+	border-radius: 5px;
+	color: white;
+	outline: none;
+	background: none;
+	width: 100%;
+	font-family: "Lato";
+	font-size: 16px;
+}
+
+.searchContainer {
+	display: flex;
+	align-items: center;
+	margin: 0px auto;
+	background-color: #2c2c2c;
+	padding: 8px;
+	border-radius: 5px;
+	width: 20%;
+}
+
+.searchIcon {
+	color: white;
+	margin-right: 5px;
+}
+
+.animeEntry {
+	display: flex;
+	overflow-x: auto;
+}
+
+.animeEntry::-webkit-scrollbar {
+	height: 7px;
+}
+
+.animeEntry::-webkit-scrollbar-track {
+	background-color: #636363;
+	border-radius: 5px;
+}
+
+.animeEntry::-webkit-scrollbar-thumb {
+	background-color: rgba(196, 196, 196, 0.692);
+	border-radius: 5px;
+
+}
+
+.anime {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 10px;
+	border-style: dotted;
+	border-color: #636363;
+	margin: 10px;
+	border-radius: 10px;
+	border-width: 4px;
+}
+
+.anime p {
+	color: white;
+	width: 25vh;
+	font-family: "Lato";
+	font-size: 18px;
+}
+
+.animeImage {
+	border-radius: 10px;
+}
+
+@media screen and (max-width: 768px) {
+	.searchContainer {
+		width: 70%;
+	}
+}
\ No newline at end of file
diff --git a/src/app/top-airing/page.js b/src/app/top-airing/page.js
index e56435f..e564e16 100644
--- a/src/app/top-airing/page.js
+++ b/src/app/top-airing/page.js
@@ -22,6 +22,7 @@ export default async function Trending() {
 								width={160}
 								height={220}
 								alt="Drama"
+								priority
 							/>
 							<p>
 								{item.title}