This commit is contained in:
Şahan Hasret
2025-11-21 17:46:30 +03:00
parent c0b7fb463e
commit 76c31274d5
46 changed files with 3675 additions and 1043 deletions

View File

@@ -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>