52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import search from "./icons/search.svg";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
interface ISearchFormProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
handleSubmit: (e: React.MouseEvent<HTMLFormElement>) => void;
|
|
}
|
|
const SearchForm: React.FC<ISearchFormProps> = ({
|
|
handleSubmit,
|
|
name,
|
|
placeholder,
|
|
value,
|
|
onChange,
|
|
style,
|
|
}: ISearchFormProps) => {
|
|
const t = useTranslations("general");
|
|
|
|
return (
|
|
<form
|
|
className="mb-8 h-12 w-full relative flex items-center"
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<div className="h-full flex flex-1 items-center border border-black rounded-sm bg-white">
|
|
<Image
|
|
className="w-12 h-12 p-2"
|
|
src={search}
|
|
alt="Search button icon"
|
|
/>
|
|
<input
|
|
onChange={onChange}
|
|
value={value}
|
|
placeholder={placeholder}
|
|
name={name}
|
|
type="text"
|
|
className="px-3 pl-2 w-full h-full text-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
aria-label={t("search")}
|
|
/>
|
|
</div>
|
|
<button
|
|
className="h-full w-24 rounded-sm bg-blue text-white"
|
|
type="submit"
|
|
>
|
|
{t("search")}
|
|
</button>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default SearchForm;
|