diff options
| -rw-r--r-- | pages/anime/[...id].js | 2 | ||||
| -rw-r--r-- | pages/index.js | 18 | ||||
| -rw-r--r-- | pages/search/[param].js (renamed from pages/search.js) | 49 |
3 files changed, 47 insertions, 22 deletions
diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index 71dd893..b7e222d 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -288,7 +288,7 @@ export default function Himitsu({ info.title.native )}` } - className={`hover:scale-[1.02] hover:shadow-lg px-4 scale-100 transition-transform duration-200 ease-out w-full ${ + className={`hover:scale-[1.02] hover:shadow-lg md:px-0 px-4 scale-100 transition-transform duration-200 ease-out w-full ${ relation.type === "MUSIC" ? "pointer-events-none" : "" diff --git a/pages/index.js b/pages/index.js index 5fe7e37..83c907b 100644 --- a/pages/index.js +++ b/pages/index.js @@ -21,7 +21,7 @@ export function Navigasi() { const router = useRouter(); const handleFormSubmission = (inputValue) => { - router.push(`/search?hasil=${encodeURIComponent(inputValue)}`); + router.push(`/search/${encodeURIComponent(inputValue)}`); }; const handleKeyDown = async (event) => { @@ -44,13 +44,15 @@ export function Navigasi() { moopa </Link> <ul className="hidden items-center gap-10 pt-2 font-outfit text-[14px] md:flex"> - <Link href="/search"> - <li>AniList Index</li> - </Link> - <Link href="/test"> - <li>Manga</li> - </Link> - <li>Anime</li> + <li> + <Link href="/search/anime">AniList Index</Link> + </li> + <li> + <Link href="/search/manga">Manga</Link> + </li> + <li> + <Link href="/search/anime">Anime</Link> + </li> {status === "loading" ? ( <li>Loading...</li> diff --git a/pages/search.js b/pages/search/[param].js index 99b12d7..d7da1b4 100644 --- a/pages/search.js +++ b/pages/search/[param].js @@ -4,11 +4,11 @@ import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; import { useRouter } from "next/router"; import "react-loading-skeleton/dist/skeleton.css"; import Link from "next/link"; -import Navbar from "../components/navbar"; +import Navbar from "../../components/navbar"; import Head from "next/head"; -import Footer from "../components/footer"; +import Footer from "../../components/footer"; -import { useAniList } from "../lib/useAnilist"; +import { useAniList } from "../../lib/useAnilist"; const genre = [ "Action", @@ -68,10 +68,23 @@ export default function Card() { const [data, setData] = useState(); const [loading, setLoading] = useState(true); - const { hasil } = router.query; + let hasil = null; + let tipe = "ANIME"; - const [search, setQuery] = useState(hasil || null); - const [type, setSelectedType] = useState("ANIME"); + const query = router.query; + if (query.param !== "anime" && query.param !== "manga") { + hasil = query.param; + } else if (query.param === "anime") { + hasil = null; + tipe = "ANIME"; + } else if (query.param === "manga") { + hasil = null; + tipe = "MANGA"; + } + // console.log(hasil); + + const [search, setQuery] = useState(hasil); + const [type, setSelectedType] = useState(tipe); const [seasonYear, setSeasonYear] = useState(); const [season, setSeason] = useState(); const [genres, setSelectedGenre] = useState(); @@ -124,6 +137,13 @@ export default function Card() { setIsVisible(!isVisible); } + function handleTipe(e) { + setSelectedType(e.target.value); + router.push(`/search/${e.target.value.toLowerCase()}`); + } + + // console.log(genres); + return ( <> <Head> @@ -153,7 +173,7 @@ export default function Card() { <select className="w-[297px] h-[46px] bg-secondary rounded-[10px] justify-between pl-[7.5rem] pr-5 flex items-center" value={type} - onChange={(e) => setSelectedType(e.target.value)} + onChange={(e) => handleTipe(e)} > {types.map((option) => ( <option key={option} value={option}> @@ -241,12 +261,15 @@ export default function Card() { className="w-[195px] lg:w-[297px] lg:h-[46px] h-[35px] bg-secondary rounded-[10px] flex items-center text-center cursor-pointer hover:bg-[#272b35] transition-all duration-300" onChange={(e) => setSelectedGenre(e.target.value)} > - <option value="">Select a Genre</option> - {genre.map((option) => ( - <option key={option} value={option}> - {option} - </option> - ))} + <option value={["Action"]}>Select a Genre</option> + {genre.map((option) => { + // console.log(option); + return ( + <option key={option} value={option}> + {option} + </option> + ); + })} </select> </div> <div className="lg:hidden text-start items-center lg:items-start flex w-screen lg:w-auto px-8 lg:px-0 flex-row justify-between lg:flex-col pb-5 "> |