import CardCompact from '../Common/CardCompact' import CardExpanded from '../Common/CardExpanded' import { useRouter } from 'next/router' import React, { useState, useEffect } from 'react' import { MovieSVG, SearchSVG } from '../SVG/search' import { getSearchResult } from '../service/service' import { Loader } from '../Common/Loader' import { CompactList, ExpandedList } from '../SVG/listing' import ToastMsg from '../Common/ToastMsg' import Head from 'next/head' import { useTheme } from 'next-themes' let data1 = [ { name: 'Movie', cat: 'Movies', time: '10D' }, { name: 'TV-Show', cat: 'TV', time: '10D' }, { name: 'Games', cat: 'Games', time: '10D', }, { name: 'Music', cat: 'Music', time: '10D' }, { name: 'Anime', cat: 'Anime', time: '10D' }, { name: 'Books', cat: 'Books', time: '10D', }, { name: 'Other', cat: 'Other', time: '10D' }, { name: 'XXX', cat: 'XXX', time: '1D' }, ] const Home = () => { const router = useRouter() const [movieList, setMovieList] = useState([]) const [search, setSearch] = useState(false) const [loader, setLoader] = useState(false) const [ListType, setListType] = useState('expanded') const [searchSuccess, setSearchSuccess] = useState(false) const [checkboxInput, setCheckboxInput] = useState([]) const [searchbarclicked, setSearchBar] = useState(false) const { theme, setTheme } = useTheme() useEffect(() => { setTheme(theme) }) const searchResult = e => { e.preventDefault() setLoader(true) getSearchResult(search, checkboxInput) .then(res => { setSearchSuccess(true) console.log('page', res?.data?.results) setLoader(false) setMovieList(res.data.results) }) .catch(err => { console.log('error', err) ToastMsg('Some thing went wrong ', 'error') setLoader(false) }) } const handleCheckboxChange = event => { const { value, checked } = event.target console.log('event', checked, value) if (checked) { setCheckboxInput([...checkboxInput, value]) } else { setCheckboxInput(checkboxInput.filter(item => item !== value)) } } return (
Search | Yaps {loader ? : null}

{' '} This World.
At Your Fingertips.

searchResult(e)} className={`mx-auto my-10 flex w-10/12 items-center justify-center border-b-[1.5px] border-primary px-1 md:w-1/2`}> setSearch(e.target.value)} />
{ searchResult(e) }}>
{data1.map((item, index) => { return ( ) })}

{searchSuccess ? (
{movieList.length > 0 ? ( Your Search Result ) : ( No data found for : "{search}" )}
{movieList.length > 0 ? (
{ setListType('compact') }}>
{ setListType('expanded') }}>
) : null}
) : null}
{movieList?.map((item, index) => { if (ListType === 'compact') { return } else { return } })}

{data1.map((item, index) => { return (
(window.location.href = `/get-posts/category:${item?.cat}?time=${item?.time}`) } className={`group inline-flex h-[115px] w-[150px] cursor-pointer flex-col items-center justify-start gap-3.5 rounded-lg border-[0] bg-app-dark-blue pb-16 pt-7 transition duration-300 ease-in-out hover:scale-[1.05] hover:bg-[#18141f] hover:text-white dark:border-off-white/30 dark:bg-off-white/10 dark:hover:border-primary/50 dark:hover:bg-primary/10 md:w-[195px] md:items-start md:pl-[26px] md:pr-[161px] `}>
{item?.name}
) })}
) } export default Home