From 5fc30a26612f11c4a4ec5de1a98562712802f5df Mon Sep 17 00:00:00 2001
From: real-zephex <zephex-1@outlook.com>
Date: Sat, 16 Mar 2024 15:32:44 +0530
Subject: feature added: search anime by title

---
 src/app/search/page.js | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 src/app/search/page.js

(limited to 'src/app/search/page.js')

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
-- 
cgit v1.2.3