misc: init

2026-01-16 11:12:42 -05:00
parent ec2fda3c40
commit d540bf8caf
17 changed files with 2226 additions and 95 deletions
--- a/src/components/contact-form.tsx
+++ b/src/components/contact-form.tsx
@@ -0,0 +1,114 @@
+'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&apos;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>
+  )
+}