94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export default function ContactForm() {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
message: '',
|
|
});
|
|
const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setStatus('loading');
|
|
|
|
try {
|
|
const response = await fetch('/api/contact', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(formData),
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to send message');
|
|
|
|
setStatus('success');
|
|
setFormData({ name: '', email: '', message: '' });
|
|
setTimeout(() => setStatus('idle'), 3000);
|
|
} catch (error) { // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
setStatus('error');
|
|
setTimeout(() => setStatus('idle'), 3000);
|
|
}
|
|
};
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[e.target.name]: e.target.value,
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
placeholder="Ваше имя"
|
|
required
|
|
className="w-full p-3 bg-black/30 border border-zinc-800 rounded-lg focus:outline-none focus:border-[#4AFF8F] text-white"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
placeholder="Ваш email"
|
|
required
|
|
className="w-full p-3 bg-black/30 border border-zinc-800 rounded-lg focus:outline-none focus:border-[#4AFF8F] text-white"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<textarea
|
|
name="message"
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
placeholder="Ваше сообщение"
|
|
required
|
|
rows={4}
|
|
className="w-full p-3 bg-black/30 border border-zinc-800 rounded-lg focus:outline-none focus:border-[#4AFF8F] text-white resize-none"
|
|
/>
|
|
</div>
|
|
<Button
|
|
type="submit"
|
|
disabled={status === 'loading'}
|
|
className="w-full bg-[#4AFF8F] text-black hover:bg-[#4AFF8F]/90"
|
|
>
|
|
{status === 'loading' ? 'Отправка...' :
|
|
status === 'success' ? 'Отправлено!' :
|
|
status === 'error' ? 'Ошибка! Попробуйте снова' :
|
|
'Отправить'}
|
|
</Button>
|
|
</form>
|
|
);
|
|
}
|
|
|