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 ++++++++++++++++++++++++++++++++++++++++++++
 src/app/search/search.css | 79 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 154 insertions(+)
 create mode 100644 src/app/search/page.js
 create mode 100644 src/app/search/search.css

(limited to 'src/app/search')

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