Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | 2x 2x 2x 2x 2x 11x 11x 2x 2x 2x 11x 1x 1x 1x 1x 1x 11x 4x 4x 11x 1x 1x 1x 12x | import React, { ChangeEvent, FormEvent, forwardRef, RefObject } from "react"
import { useRouter } from "next/router"
import SearchIcon from "./icons/SearchIcon"
import ClearIcon from "./icons/ClearIcon"
interface InputSearchProps {
inputSearchState: string
setInputSearchState: Function
gameListRef: RefObject<HTMLDivElement>
classes: string
}
const InputSearch = forwardRef(
(
{
inputSearchState,
setInputSearchState,
gameListRef,
classes,
}: InputSearchProps,
ref: any
) => {
const router = useRouter()
const clearSearch = () => {
setInputSearchState("")
router.push("/", undefined, { shallow: false })
gameListRef.current?.scrollTo(0, 0)
}
const onSearch = (e: FormEvent) => {
e.preventDefault()
const { value: searchString } = ref?.current as HTMLInputElement
setInputSearchState(searchString)
router.push(`/?search=${searchString}`, undefined, {
shallow: false,
})
gameListRef.current?.scrollTo(0, 0)
}
const onChangeSearchInput = (e: ChangeEvent<HTMLInputElement>) => {
const { value: searchString } = e.target
if (!searchString.length) clearSearch()
}
const onClearSearchBtn = () => {
clearSearch()
ref.current.value = ""
}
return (
<form
name="search-form"
onSubmit={(e) => onSearch(e)}
className={classes}
>
<label htmlFor="search">
<div className="relative w-[350px] sm:w-[400px]">
<input
ref={ref}
id="search"
type="text"
onChange={onChangeSearchInput}
autoComplete="off"
className="block p-[11px] pl-12 w-full text-md text-black bg-gray-50
rounded-lg border border-gray-300"
placeholder="Search Game (eg. Poker, Slots, Blackjack)"
/>
<div
className="flex absolute inset-y-0 left-0 items-center
pl-[17px] pointer-events-none"
>
<SearchIcon />
</div>
{inputSearchState !== "" && (
<div
onClick={onClearSearchBtn}
title="Clear Search"
className="text-white absolute right-2.5 bottom-2.5
hover:bg-gray-200 hover:cursor-pointer
rounded-lg"
>
<ClearIcon />
</div>
)}
</div>
</label>
</form>
)
}
)
export default InputSearch
|