Add onEnter search

This commit is contained in:
ismailsosic
2023-03-08 12:08:29 +01:00
parent c19a3481d6
commit c39df7ec32
26 changed files with 189 additions and 252 deletions

View File

@@ -2,7 +2,6 @@ import React, { useState } from 'react'
import Results from '../components/Results'
import { AiOutlineClose, AiOutlineSearch } from 'react-icons/ai'
import Link from 'next/link'
import { useRef } from 'react'
import { useRouter } from 'next/router'
import { ENV_VAR } from '../envconfig'
@@ -10,14 +9,16 @@ import { ENV_VAR } from '../envconfig'
const SearchPage = ({data}) => {
const router = useRouter()
const [searchInput, setSearchInput] = useState(router.query.term)
const term = searchInput
const search = () => {
const term = searchInput
if(!term) return
router.push(`/search?term=${term}`)
}
console.log(data)
const enterHandler = (e) => {
if(e.key === "Enter" && term !== "") router.push(`/search?term=${term}`)
}
return (
<div className='flex flex-col justify-center'>
@@ -45,7 +46,7 @@ const SearchPage = ({data}) => {
"
>
<i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => search()}><AiOutlineSearch size={25}/></i>
<input value={searchInput} onChange={(e) => setSearchInput(e.target.value)} className="bg-[#303134] ml-5 w-[70%] active:border-none text-white outline-none text-lg "/>
<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>