From 5fc30a26612f11c4a4ec5de1a98562712802f5df Mon Sep 17 00:00:00 2001 From: real-zephex Date: Sat, 16 Mar 2024 15:32:44 +0530 Subject: feature added: search anime by title --- src/app/anime/page.js | 2 ++ src/app/info/[id]/page.js | 10 +++--- src/app/info/info.css | 16 ++++++++++ src/app/info/page.js | 10 ++++-- src/app/kdrama/kdrama.css | 1 + src/app/kdrama/page.js | 4 +-- src/app/recent/page.js | 1 + src/app/search/page.js | 75 +++++++++++++++++++++++++++++++++++++++++++ src/app/search/search.css | 79 ++++++++++++++++++++++++++++++++++++++++++++++ src/app/top-airing/page.js | 1 + 10 files changed, 189 insertions(+), 10 deletions(-) create mode 100644 src/app/search/page.js create mode 100644 src/app/search/search.css (limited to 'src') 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 (
+
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}) { )} -
- {info && info.episodes.map((item, index) => ( - - ))} -
+
+ {info && info.episodes.map((item, index) => ( + + ))} +
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 ( -

- Hello -

+
+

+ This is the anime info page. This page will display information about the queried anime when anime id is passed along the url. +

+
) } \ 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() {

Start by searching for some dramas

- +

Look for the search box above. - +

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 />

{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 ( +

+
+
+ + setSearchedAnime(event.target.value)} + onKeyDown={(event) => handleKeyPress(event)} + placeholder='Enter anime title'> + + +
+
+ +
+ {search1 && search1.results.map((item, index) => ( + +
+

{item.title}

+ +
+ + ))} +
+
+ + ) +} \ 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 />

{item.title} -- cgit v1.2.3