35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
import {faSearch} from "@fortawesome/free-solid-svg-icons";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {ChangeEvent, Dispatch, SetStateAction} from "react";
|
|
import {useTranslations} from "next-intl";
|
|
import TextInput from "@/components/form/TextInput";
|
|
|
|
export default function SearchBook(
|
|
{
|
|
searchQuery,
|
|
setSearchQuery,
|
|
}: {
|
|
searchQuery: string;
|
|
setSearchQuery: Dispatch<SetStateAction<string>>
|
|
}) {
|
|
const t = useTranslations();
|
|
|
|
return (
|
|
<div className="flex items-center relative my-5 w-full max-w-3xl">
|
|
<div className="relative flex-grow">
|
|
<div className="relative">
|
|
<FontAwesomeIcon icon={faSearch}
|
|
className="absolute left-4 top-1/2 transform -translate-y-1/2 text-primary w-5 h-5 pointer-events-none z-10"/>
|
|
<div className="pl-11">
|
|
<TextInput
|
|
value={searchQuery}
|
|
setValue={(e: ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
|
|
placeholder={t("searchBook.placeholder")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|