add
This commit is contained in:
@@ -1,81 +0,0 @@
|
||||
import { Form, useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { createElement } from 'react'
|
||||
import clsx from 'clsx'
|
||||
import { z } from 'zod'
|
||||
|
||||
const schema = z.object({
|
||||
name: z.string().nonempty({ message: 'Deve preencher o nome' }),
|
||||
email: z.string().nonempty({ message: 'Deve preencher o email' }).email({ message: 'Deve ser um email válido' }),
|
||||
message: z.string().nonempty({ message: 'Deve preencher a mensagem' }),
|
||||
})
|
||||
|
||||
export default function Contact() {
|
||||
const { register, formState, control, reset } = useForm({ resolver: zodResolver(schema) })
|
||||
|
||||
return (
|
||||
<Form
|
||||
action="https://n8n.eduseg.com.br/webhook/a377b3e0-b159-4536-98ab-e13822b60562"
|
||||
onSuccess={() => reset()}
|
||||
control={control}
|
||||
className="lg:w-6/12 mx-auto flex flex-col gap-2.5"
|
||||
>
|
||||
{formState.isSubmitSuccessful && (
|
||||
<p className="border border-lime-400 text-white bg-lime-400/25 p-5 rounded-xl font-semibold">
|
||||
Sua mensagem foi enviada com sucesso.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<Label>
|
||||
<span className="lg:w-14">Nome</span>
|
||||
<Input aria-invalid={!!formState.errors?.name} {...register('name')} />
|
||||
</Label>
|
||||
<Error>{formState.errors.name?.message}</Error>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>
|
||||
<span className="lg:w-14">Email</span>
|
||||
<Input aria-invalid={!!formState.errors?.name} {...register('email')} />
|
||||
</Label>
|
||||
<Error>{formState.errors.email?.message}</Error>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="flex-col !items-start !gap-1">
|
||||
<span>Mensagem</span>
|
||||
<Input as="textarea" className="h-28" aria-invalid={!!formState.errors?.message} {...register('message')} />
|
||||
</Label>
|
||||
<Error className="lg:!pl-0">{formState.errors.message?.message}</Error>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="p-2.5 border border-lime-400/50 rounded-xl cursor-pointer transition">
|
||||
Enviar
|
||||
</button>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
export function Input({ as = 'input', className, ...props }) {
|
||||
return createElement(as, {
|
||||
className: clsx(
|
||||
'bg-white/10 focus:bg-white focus:text-black rounded-xl p-4 w-full focus:outline-0 transition duration-150',
|
||||
'aria-invalid:outline-2 aria-invalid:outline-red-600',
|
||||
className,
|
||||
),
|
||||
...props,
|
||||
})
|
||||
}
|
||||
|
||||
function Label({ children, className }) {
|
||||
return <label className={clsx('flex max-lg:flex-col lg:items-center gap-1 lg:gap-2.5', className)}>{children}</label>
|
||||
}
|
||||
|
||||
function Error({ children, className }) {
|
||||
if (children) {
|
||||
return <p className={clsx('text-sm text-red-500 lg:pl-16', className)}>{children}</p>
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
Reference in New Issue
Block a user