ldc-ovoteam/resources/ts/front/Components/Base/Inputs/SearchInput.tsx
2026-04-15 09:31:53 +02:00

45 lines
1.2 KiB
TypeScript

// * Packages
import { SearchIcon } from "lucide-react";
import { router, useForm } from "@inertiajs/react";
// * Components shadcn
import { Button } from "@/components/ui/button";
// * Other
import InputError from "@/front/Components/Base/InputError";
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from "@/components/ui/input-group";
import { route } from "ziggy-js";
export default function SearchInput() {
const { data, setData, processing, errors } = useForm({
search: "",
});
const submit = () => {
// e.preventDefault();
router.visit(route("front.search"));
};
return (
<form>
<InputGroup className="rounded-full">
<InputGroupInput
value={data.search}
onChange={(e) => setData("search", e.target.value)}
disabled={processing}
placeholder="Rechercher..."
/>
<InputGroupAddon align="inline-end">
<Button
onClick={submit}
variant="ghost"
className="rounded-full w-7 py-0 h-7"
>
<SearchIcon />
</Button>
</InputGroupAddon>
</InputGroup>
<InputError message={errors?.search} />
</form>
);
}