67 lines
2.4 KiB
JavaScript
67 lines
2.4 KiB
JavaScript
import React, { useState } from 'react'
|
|
import Results from '../components/Results'
|
|
import { AiOutlineClose, AiOutlineSearch } from 'react-icons/ai'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
import { ENV_VAR } from '../envconfig'
|
|
|
|
|
|
const SearchPage = ({data}) => {
|
|
const router = useRouter()
|
|
const [searchInput, setSearchInput] = useState(router.query.term)
|
|
const term = searchInput
|
|
|
|
const search = () => {
|
|
if(!term) return
|
|
router.push(`/search?term=${term}`)
|
|
}
|
|
|
|
const enterHandler = (e) => {
|
|
if(e.key === "Enter" && term !== "") router.push(`/search?term=${term}`)
|
|
}
|
|
|
|
return (
|
|
<div className='flex flex-col justify-center'>
|
|
<div className="flex flex-col laptop:flex-row flex-wrap items-start w-[100vw] laptop:w-[80vw] laptop:h-[20vh] laptop:max-w-[90vw]">
|
|
<div className="p-10 w-[100vw] laptop:w-[25rem]">
|
|
<Link href='/'><p className="text-5xl tablet:text-6xl laptop:text-3xl text-white text-center font-serif ">KitabCitab</p></Link>
|
|
</div>
|
|
<div className="group
|
|
my-3
|
|
mx-auto
|
|
py-5
|
|
h-[4vh]
|
|
min-w-[90vw]
|
|
bg-[#303134]
|
|
border-[1px] w-[90vw] border-[#bdc1c6] rounded-3xl
|
|
flex flex-row justify-around items-center
|
|
|
|
tablet:w-[70vw]
|
|
|
|
laptop:min-w-[40vw]
|
|
laptop:w-[40vw]
|
|
laptop:mx-0
|
|
laptop:my-10
|
|
laptop:justify-between
|
|
"
|
|
>
|
|
<i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => search()}><AiOutlineSearch size={25}/></i>
|
|
<input onKeyDown={(e) => enterHandler(e)} value={searchInput} onChange={(e) => setSearchInput(e.target.value)} className="bg-[#303134] ml-5 w-[70%] active:border-none text-white outline-none text-lg "/>
|
|
<i className='rounded-3xl text-[#9aa0a6] px-3' onClick={() => setSearchInput("")}><AiOutlineClose size={25} /></i>
|
|
</div>
|
|
</div>
|
|
<Results data={data.hits.hits} term={searchInput}/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export async function getServerSideProps(context) {
|
|
// Fetch data from external API
|
|
const res = await fetch(`${ENV_VAR}_search?q=${context.query.term}`)
|
|
const data = await res.json()
|
|
|
|
// Pass data to the page via props
|
|
return { props: { data } }
|
|
}
|
|
|
|
export default SearchPage |