add result component, env var and fetch functions

This commit is contained in:
ismailsosic
2023-02-09 15:49:17 +01:00
parent a801985548
commit bf2eebafb6
37 changed files with 175 additions and 139 deletions

View File

@@ -1,7 +1,18 @@
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}`)
}
export default function HomePage() {
return (
<div className="flex flex-col justify-center items-center w-[100vw] h-[50vh]">
<div className="p-10 ">
@@ -17,16 +28,16 @@ export default function HomePage() {
laptop:w-[40%]
"
>
<i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => console.log("Search for results")}><AiOutlineSearch size={25}/></i>
<input 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={() => console.log("Remove text from input")}><AiOutlineClose size={25} /></i>
<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>
<Link href='/search'><button
<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={() => console.log("Searching")}
onClick={() => search()}
>
Traži
</button></Link>
</button>
</div>