|
| 1 | +'use client' |
| 2 | + |
| 3 | +import { useState } from 'react' |
| 4 | +import { useForm } from 'react-hook-form' |
| 5 | +import { zodResolver } from '@hookform/resolvers/zod' |
| 6 | +import * as z from 'zod' |
| 7 | + |
| 8 | +const formSchema = z.object({ |
| 9 | + name: z.string().min(2, { message: 'El nombre debe tener al menos 2 caracteres.' }), |
| 10 | + email: z.string().email({ message: 'Por favor, introduce un email válido.' }), |
| 11 | + message: z.string().min(10, { message: 'El mensaje debe tener al menos 10 caracteres.' }), |
| 12 | +}) |
| 13 | + |
| 14 | +export default function ContactForm() { |
| 15 | + const { |
| 16 | + register, |
| 17 | + handleSubmit, |
| 18 | + formState: { errors }, |
| 19 | + reset, |
| 20 | + } = useForm({ |
| 21 | + resolver: zodResolver(formSchema), |
| 22 | + }) |
| 23 | + const [isSubmitting, setIsSubmitting] = useState(false) |
| 24 | + const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle') |
| 25 | + |
| 26 | + async function onSubmit(data: z.infer<typeof formSchema>) { |
| 27 | + setIsSubmitting(true) |
| 28 | + setSubmitStatus('idle') |
| 29 | + try { |
| 30 | + const response = await fetch('/api/contact', { |
| 31 | + method: 'POST', |
| 32 | + headers: { |
| 33 | + 'Content-Type': 'application/json', |
| 34 | + }, |
| 35 | + body: JSON.stringify(data), |
| 36 | + }) |
| 37 | + |
| 38 | + if (response.ok) { |
| 39 | + setSubmitStatus('success') |
| 40 | + reset() |
| 41 | + } else { |
| 42 | + throw new Error('Error al enviar el mensaje') |
| 43 | + } |
| 44 | + } catch (error) { |
| 45 | + setSubmitStatus('error') |
| 46 | + } finally { |
| 47 | + setIsSubmitting(false) |
| 48 | + } |
| 49 | + } |
| 50 | + |
| 51 | + return ( |
| 52 | + <form onSubmit={handleSubmit(onSubmit)} className="space-y-6" id="contact"> |
| 53 | + <div> |
| 54 | + <input |
| 55 | + {...register('name')} |
| 56 | + placeholder="Tu nombre" |
| 57 | + className={`w-full rounded-md border px-3 py-2 ${errors.name ? 'border-red-500' : 'border-gray-300'} focus:outline-none focus:ring-2 focus:ring-blue-500`} |
| 58 | + /> |
| 59 | + {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name.message}</p>} |
| 60 | + </div> |
| 61 | + <div> |
| 62 | + <input |
| 63 | + {...register('email')} |
| 64 | + type="email" |
| 65 | + placeholder="Tu email" |
| 66 | + className={`w-full rounded-md border px-3 py-2 ${errors.email ? 'border-red-500' : 'border-gray-300'} focus:outline-none focus:ring-2 focus:ring-blue-500`} |
| 67 | + /> |
| 68 | + {errors.email && <p className="mt-1 text-sm text-red-500">{errors.email.message}</p>} |
| 69 | + </div> |
| 70 | + <div> |
| 71 | + <textarea |
| 72 | + {...register('message')} |
| 73 | + placeholder="Tu mensaje" |
| 74 | + rows={4} |
| 75 | + className={`w-full rounded-md border px-3 py-2 ${errors.message ? 'border-red-500' : 'border-gray-300'} focus:outline-none focus:ring-2 focus:ring-blue-500`} |
| 76 | + /> |
| 77 | + {errors.message && <p className="mt-1 text-sm text-red-500">{errors.message.message}</p>} |
| 78 | + </div> |
| 79 | + <button |
| 80 | + type="submit" |
| 81 | + disabled={isSubmitting} |
| 82 | + className="w-full rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50" |
| 83 | + > |
| 84 | + {isSubmitting ? 'Enviando...' : 'Enviar mensaje'} |
| 85 | + </button> |
| 86 | + {submitStatus === 'success' && ( |
| 87 | + <p className="mt-3 text-sm text-green-600"> |
| 88 | + Mensaje enviado con éxito. Gracias por contactarnos. |
| 89 | + </p> |
| 90 | + )} |
| 91 | + {submitStatus === 'error' && ( |
| 92 | + <p className="mt-3 text-sm text-red-600"> |
| 93 | + Hubo un problema al enviar tu mensaje. Por favor, inténtalo de nuevo. |
| 94 | + </p> |
| 95 | + )} |
| 96 | + </form> |
| 97 | + ) |
| 98 | +} |
0 commit comments