81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import { useForm } from "react-hook-form";
|
|
import { useMutation } from "node_modules/@tanstack/react-query/build/legacy";
|
|
import { queryClient } from "../queryClient";
|
|
import axios from "axios";
|
|
import { createElement } from "react";
|
|
import clsx from "clsx";
|
|
|
|
interface IFormInput {
|
|
name: string;
|
|
email: string;
|
|
message: string;
|
|
}
|
|
|
|
export function Form() {
|
|
const { register, handleSubmit, reset, formState } = useForm<IFormInput>();
|
|
const { mutateAsync } = useMutation(
|
|
{
|
|
mutationFn: async (data: IFormInput) => {
|
|
return await axios.post("https://n8n.sergio.run/webhook/eduseg", data);
|
|
},
|
|
onSuccess: () => {
|
|
reset();
|
|
},
|
|
},
|
|
queryClient,
|
|
);
|
|
|
|
const onSubmit = async (data: IFormInput) => {
|
|
await mutateAsync(data);
|
|
};
|
|
|
|
return (
|
|
<form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className="flex flex-col gap-3 lg:gap-6"
|
|
>
|
|
{formState.isSubmitSuccessful && (
|
|
<p className="bg-green-700 text-white p-2.5 rounded-lg">OK!</p>
|
|
)}
|
|
|
|
<div className="grid lg:grid-cols-2 gap-2.5 lg:gap-5">
|
|
<label>
|
|
Nome
|
|
<Input {...register("name")} />
|
|
</label>
|
|
<label>
|
|
Email
|
|
<Input {...register("email")} />
|
|
</label>
|
|
</div>
|
|
|
|
<label>
|
|
Mensagem
|
|
<Input as="textarea" className="h-26" {...register("message")} />
|
|
</label>
|
|
|
|
<button
|
|
type="submit"
|
|
className="font-medium bg-green-secondary hover:bg-green-support p-2.5 rounded-lg transition cursor-pointer h-12"
|
|
>
|
|
Quero um orçamento
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
interface IInput extends React.HTMLAttributes<HTMLElement> {
|
|
as?: string;
|
|
className?: string | undefined;
|
|
}
|
|
|
|
export function Input({ as = "input", className, ...props }: IInput) {
|
|
return createElement(as, {
|
|
className: clsx(
|
|
"border border-gray-300 focus:border-green-secondary focus:ring ring-green-secondary bg-white p-2.5 rounded-lg w-full outline-none",
|
|
className,
|
|
),
|
|
...props,
|
|
});
|
|
}
|