aboutsummaryrefslogtreecommitdiff
path: root/src/app/search
diff options
context:
space:
mode:
Diffstat (limited to 'src/app/search')
-rw-r--r--src/app/search/page.js99
1 files changed, 49 insertions, 50 deletions
diff --git a/src/app/search/page.js b/src/app/search/page.js
index f384d85..e6d4f08 100644
--- a/src/app/search/page.js
+++ b/src/app/search/page.js
@@ -1,93 +1,92 @@
-"use client"
+"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';
+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 [loading, setLoading] = useState(null)
+ const [searchedAnime, setSearchedAnime] = useState(null);
+ const [loading, setLoading] = useState(null);
const handleKeyPress = (event) => {
if (
- (event.code === "Enter" ||
- event.key === "Enter" ||
- event.code === 13) &&
+ (event.code === "Enter" ||
+ event.key === "Enter" ||
+ event.code === 13) &&
searchedAnime != ""
) {
- fetch_animes(searchedAnime)
+ fetch_animes(searchedAnime);
} else if (
- (event.code === "Enter" ||
- event.key === "Enter" ||
- event.code === 13) &&
+ (event.code === "Enter" ||
+ event.key === "Enter" ||
+ event.code === 13) &&
searchedAnime === ""
- ) {
- alert("Input cannot be empty")
+ ) {
+ alert("Input cannot be empty");
}
- }
+ };
const [search1, setSearch] = useState(null);
const fetch_animes = (title) => {
fetch("https://dramalama-api.vercel.app/anime/gogoanime/" + title)
.then(setLoading(true))
- .then(res => res.json())
- .then(
- data => {
- setSearch(data)
- setLoading(false)
- }
- )
- }
+ .then((res) => res.json())
+ .then((data) => {
+ setSearch(data);
+ setLoading(false);
+ });
+ };
return (
<div>
- <div className='inputContainer'>
- <div className='searchContainer'>
- <FaSearch className='searchIcon' />
- <input
- onChange={(event) => setSearchedAnime(event.target.value)}
+ <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>
+ placeholder="Enter anime title"
+ ></input>
</div>
</div>
-
{loading && (
- <p style={{color: "white", textAlign: "center"}}>
- Please wait while we crunch all the data for you.
+ <p style={{ color: "white", textAlign: "center" }}>
+ Please wait while we crunch all the data for you.
</p>
)}
- <div className='animeEntry'>
+ <div className="animeEntry">
{search1 ? (
search1.results && search1.results.length > 0 ? (
search1.results.map((item, index) => (
- <Link key={index} href={`/info/${item.id}`} style={{textDecoration: "none"}}>
- <div className='anime'>
+ <Link
+ key={index}
+ href={`/info/${item.id}`}
+ style={{ textDecoration: "none" }}
+ >
+ <div className="anime">
<p>{item.title}</p>
- <Image
+ <Image
src={item.image}
- className='animeImage'
+ className="animeImage"
width={120}
height={160}
- alt='Drama Poster'
+ alt="Drama Poster"
/>
</div>
</Link>
))
) : (
- <div style={{margin: "0px auto"}}>
- <p style={{color: "white"}}>No results found</p>
+ <div style={{ margin: "0px auto" }}>
+ <p style={{ color: "white" }}>No results found</p>
</div>
)
) : null}
</div>
-
</div>
-
- )
-} \ No newline at end of file
+ );
+}