Database
This commit is contained in:
@@ -7,11 +7,51 @@ import { dataStore, type SiteSettings } from '@/lib/dataStore';
|
||||
|
||||
export default function Contact() {
|
||||
const [settings, setSettings] = useState<SiteSettings | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
subject: '',
|
||||
message: ''
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setSettings(dataStore.getSiteSettings());
|
||||
dataStore.getSiteSettings().then(setSettings);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
await dataStore.addMessage({
|
||||
name: formData.name,
|
||||
email: formData.email,
|
||||
phone: formData.phone,
|
||||
subject: formData.subject,
|
||||
message: formData.message,
|
||||
type: 'contact'
|
||||
});
|
||||
|
||||
alert('Mesajınız başarıyla gönderildi! En kısa sürede size dönüş yapacağız.');
|
||||
|
||||
// Formu temizle
|
||||
setFormData({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
subject: '',
|
||||
message: ''
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Mesaj gönderilirken hata:', error);
|
||||
alert('Mesaj gönderilirken bir hata oluştu. Lütfen tekrar deneyin.');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!settings) return null;
|
||||
|
||||
return (
|
||||
@@ -152,10 +192,7 @@ export default function Contact() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form className="max-w-2xl mx-auto space-y-6" onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
alert('Mesajınız gönderildi! (Demo)');
|
||||
}}>
|
||||
<form className="max-w-2xl mx-auto space-y-6" onSubmit={handleSubmit}>
|
||||
{/* İki Sütunlu Alan */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Ad Soyad */}
|
||||
@@ -167,6 +204,8 @@ export default function Contact() {
|
||||
type="text"
|
||||
id="contact-name"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
|
||||
placeholder="Adınız ve Soyadınız"
|
||||
/>
|
||||
@@ -181,6 +220,8 @@ export default function Contact() {
|
||||
type="email"
|
||||
id="contact-email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
|
||||
placeholder="ornek@email.com"
|
||||
/>
|
||||
@@ -194,6 +235,8 @@ export default function Contact() {
|
||||
<input
|
||||
type="tel"
|
||||
id="contact-phone"
|
||||
value={formData.phone}
|
||||
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
|
||||
placeholder="0(5__) ___ __ __"
|
||||
/>
|
||||
@@ -208,6 +251,8 @@ export default function Contact() {
|
||||
type="text"
|
||||
id="contact-subject"
|
||||
required
|
||||
value={formData.subject}
|
||||
onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
|
||||
placeholder="Mesaj konusu"
|
||||
/>
|
||||
@@ -223,6 +268,8 @@ export default function Contact() {
|
||||
id="contact-message"
|
||||
required
|
||||
rows={6}
|
||||
value={formData.message}
|
||||
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all resize-none text-gray-900 placeholder:text-gray-500"
|
||||
placeholder="Lütfen mesajınızı yazınız..."
|
||||
></textarea>
|
||||
@@ -246,12 +293,25 @@ export default function Contact() {
|
||||
<div className="text-center pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
className="px-8 py-3 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors font-semibold shadow-lg hover:shadow-xl flex items-center justify-center space-x-2 mx-auto"
|
||||
disabled={isSubmitting}
|
||||
className="px-8 py-3 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors font-semibold shadow-lg hover:shadow-xl flex items-center justify-center space-x-2 mx-auto disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
|
||||
</svg>
|
||||
<span>Gönder</span>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span>Gönderiliyor...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
|
||||
</svg>
|
||||
<span>Gönder</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user