86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
"use client";
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { ContactoSchema, ContactoFormData } from "@/utils/validations";
|
|
import { useFormSubmit } from "@/hooks/useForm";
|
|
import { Input } from "../ui/Input";
|
|
import { Button } from "../ui/Button";
|
|
import { Checkbox } from "../ui/Checkbox";
|
|
import { Textarea } from "../ui/Textarea";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { useLanguage } from "@/context/LanguageContext";
|
|
|
|
export const ContactoForm = () => {
|
|
const { t, locale } = useLanguage();
|
|
const { submit, isSubmitting, success, error } = useFormSubmit("mensajes_contacto");
|
|
|
|
const { register, handleSubmit, formState: { errors }, reset } = useForm<ContactoFormData>({
|
|
resolver: zodResolver(ContactoSchema),
|
|
});
|
|
|
|
const onSubmit = async (data: ContactoFormData) => {
|
|
await submit(data);
|
|
if (!error) reset();
|
|
};
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<AnimatePresence mode="wait">
|
|
{success ? (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="p-10 border border-ocean rounded-[24px] text-center bg-ice/10"
|
|
>
|
|
<h3 className="text-xl font-bold text-navy mb-2">
|
|
{t.contacto.success.title}
|
|
</h3>
|
|
<p className="text-navy/60">
|
|
{t.contacto.success.desc}
|
|
</p>
|
|
</motion.div>
|
|
) : (
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
|
<Input
|
|
label={t.contacto.form.name}
|
|
placeholder={locale === 'en' ? "Your name" : locale === 'ca' ? "El teu nom" : "Tu nombre"}
|
|
{...register("nombre")}
|
|
error={errors.nombre?.message}
|
|
/>
|
|
|
|
<Input
|
|
label={t.contacto.form.email}
|
|
placeholder="tu@email.com"
|
|
{...register("email")}
|
|
error={errors.email?.message}
|
|
/>
|
|
|
|
<Textarea
|
|
label={t.contacto.form.message}
|
|
placeholder={locale === 'en' ? "Write your message here..." : locale === 'ca' ? "Escriu aquí el teu missatge..." : "Escribe aquí tu mensaje..."}
|
|
rows={5}
|
|
{...register("mensaje")}
|
|
error={errors.mensaje?.message}
|
|
/>
|
|
|
|
<Checkbox
|
|
label={t.contacto.form.privacy}
|
|
{...register("privacidad")}
|
|
error={errors.privacidad?.message}
|
|
/>
|
|
|
|
{error && <p className="text-red-600 font-bold text-sm">{error}</p>}
|
|
|
|
<div className="pt-4">
|
|
<Button type="submit" disabled={isSubmitting} className="w-full">
|
|
{isSubmitting
|
|
? (locale === 'en' ? "Sending..." : locale === 'ca' ? "Enviant..." : "Enviando...")
|
|
: t.contacto.form.submit}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}; |