46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
import { AiOutlineSearch, AiOutlineClose } from 'react-icons/ai'
|
|
import Link from 'next/link'
|
|
import { useRef } from 'react'
|
|
import { useRouter } from 'next/router'
|
|
|
|
export default function Home({data}) {
|
|
const router = useRouter()
|
|
const searchInputRef = useRef(null)
|
|
|
|
const search = () => {
|
|
const term = searchInputRef.current.value
|
|
if(!term) return
|
|
router.push(`/search?term=${term}`)
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col justify-center items-center w-[100vw] h-[50vh]">
|
|
<div className="p-10 ">
|
|
<p className="text-6xl text-white font-serif">KitabCitab</p>
|
|
</div>
|
|
<div className="group
|
|
hover:bg-[#303134]
|
|
py-2 border-[1px] w-[90%]
|
|
border-[#bdc1c6] rounded-3xl flex flex-row justify-around
|
|
|
|
tablet:w-[70%]
|
|
|
|
laptop:w-[40%]
|
|
"
|
|
>
|
|
<i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => search()}><AiOutlineSearch size={25}/></i>
|
|
<input ref={searchInputRef} className="bg-[#202124] group-hover:bg-[#303134] w-[80%] px-2 active:border-none text-white outline-none text-xl"/>
|
|
<i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => (searchInputRef.current.value = "")}><AiOutlineClose size={25} /></i>
|
|
</div>
|
|
<button
|
|
className='py-1 px-10 mt-10 text-3xl rounded-md bg-[#303134] text-white font-serif border-[1px] border-[#303134] hover:border-[#fff] hover:border-[1px]'
|
|
onClick={() => search()}
|
|
>
|
|
Traži
|
|
</button>
|
|
</div>
|
|
|
|
|
|
)
|
|
}
|