Add onEnter search
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user