import { MdChevronLeft, MdChevronRight } from "react-icons/md"; import { aniListData } from "../lib/AniList"; import React, { useState, useEffect } from "react"; import ReactHtmlParser from "kt-react-html-parser"; import Head from "next/head"; import Link from "next/link"; import Footer from "../components/footer"; import Image from "next/image"; import Content from "../components/hero/content"; import { useRouter } from "next/router"; export default function Home({ detail, populars, topDesc }) { const [isVisible, setIsVisible] = useState(false); const [recently, setRecently] = useState(null); const popular = populars.data; const data = detail.data[0]; const router = useRouter(); const handleShowClick = () => { setIsVisible(true); }; const handleHideClick = () => { setIsVisible(false); }; useEffect(() => { function fetchData() { const recent = JSON.parse(localStorage.getItem("recentWatch")); if (recent) { setRecently(recent); } } fetchData(); }, []); function handleRemove() { localStorage.removeItem("recentWatch"); setRecently(null); } const slideLeft = () => { var slider = document.getElementById("recentslider"); slider.scrollLeft = slider.scrollLeft - 500; }; const slideRight = () => { var slider = document.getElementById("recentslider"); slider.scrollLeft = slider.scrollLeft + 500; }; const handleFormSubmission = (inputValue) => { router.push(`/search?hasil=${encodeURIComponent(inputValue)}`); }; const handleKeyDown = async (event) => { if (event.key === "Enter") { event.preventDefault(); const inputValue = event.target.value; handleFormSubmission(inputValue); } }; return ( <> Moopa
{!isVisible && ( )} {/* Mobile Menu */}
{isVisible && (
)}

moopa

  • AniList Index
  • Manga
  • Anime
{/* PC / TABLET */}

{data.title.english || data.title.romaji || data.title.native}

{ReactHtmlParser(data.description)}
START WATCHING
{data.title.english
{/* Mobile */}
{recently && (

Recently Watched

handleRemove()} > Clear all
{recently.map((anime, index) => { const url = encodeURIComponent(anime.title); return ( {anime.title ); })}
)} {detail && ( )} {popular && ( )}