115 lines
3.7 KiB
TypeScript
115 lines
3.7 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
|
|
export default function ContactForm() {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
message: ''
|
|
})
|
|
const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
|
|
const [error, setError] = useState('')
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setStatus('loading')
|
|
setError('')
|
|
|
|
try {
|
|
const response = await fetch('/api/send-email', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(formData)
|
|
})
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to send email')
|
|
}
|
|
|
|
setStatus('success')
|
|
setFormData({ name: '', email: '', message: '' })
|
|
} catch {
|
|
setStatus('error')
|
|
setError('Failed to send email. Please try again.')
|
|
}
|
|
}
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[e.target.name]: e.target.value
|
|
}))
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center dark:bg-black p-4">
|
|
<Card className="w-full max-w-md dark:bg-zinc-950 dark:border-zinc-800">
|
|
<CardHeader>
|
|
<CardTitle className="dark:text-white">Contact Us</CardTitle>
|
|
<CardDescription className="dark:text-zinc-400">Send us a message and we'll get back to you.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name" className="dark:text-white">Name</Label>
|
|
<Input
|
|
id="name"
|
|
name="name"
|
|
type="text"
|
|
placeholder="Your name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
required
|
|
disabled={status === 'loading'}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email" className="dark:text-white">Email</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
placeholder="your.email@example.com"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
required
|
|
disabled={status === 'loading'}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="message" className="dark:text-white">Message</Label>
|
|
<Textarea
|
|
id="message"
|
|
name="message"
|
|
placeholder="Your message..."
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
required
|
|
disabled={status === 'loading'}
|
|
rows={5}
|
|
/>
|
|
</div>
|
|
<Button type="submit" className="w-full" disabled={status === 'loading'}>
|
|
{status === 'loading' ? 'Sending...' : 'Send Message'}
|
|
</Button>
|
|
{status === 'success' && (
|
|
<p className="text-sm text-green-400">Message sent successfully!</p>
|
|
)}
|
|
{status === 'error' && (
|
|
<p className="text-sm text-red-400">{error}</p>
|
|
)}
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|