agartha/gulermak_metro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Build

Browse Source
This commit is contained in:
Şahan Hasret
2025-11-20 16:50:28 +03:00
parent 08c426f97b
commit c0b7fb463e
15 changed files with 1395 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
components/ComplaintForm.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { useState } from 'react';
import { dataStore } from '@/lib/dataStore';
interface ComplaintFormProps {
onClose: () => void;
@@ -11,7 +12,7 @@ interface FormData {
email: string;
phone: string;
subject: string;
type: string;
type: 'sikayet' | 'oneri' | 'bilgi';
message: string;
}
@@ -21,15 +22,40 @@ export default function ComplaintForm({ onClose }: ComplaintFormProps) {
email: '',
phone: '',
subject: '',
type: 'dilek',
type: 'oneri',
message: ''
});
const handleSubmit = (e: React.FormEvent) => {
const [isSubmitting, setIsSubmitting] = useState(false);
const [showSuccess, setShowSuccess] = useState(false);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
alert('Form gönderildi! (Demo)');
handleReset();
onClose();
setIsSubmitting(true);
try {
// dataStore'a kaydet
dataStore.addMessage({
name: formData.name,
email: formData.email,
phone: formData.phone,
subject: formData.subject,
type: formData.type,
message: formData.message
});
setShowSuccess(true);
setTimeout(() => {
handleReset();
setShowSuccess(false);
onClose();
}, 2000);
} catch (error) {
console.error('Form gönderilirken hata:', error);
alert('Mesaj gönderilirken bir hata oluştu. Lütfen tekrar deneyin.');
} finally {
setIsSubmitting(false);
}
};
const handleReset = () => {
@@ -38,7 +64,7 @@ export default function ComplaintForm({ onClose }: ComplaintFormProps) {
email: '',
phone: '',
subject: '',
type: 'dilek',
type: 'oneri',
message: ''
});
};
@@ -70,6 +96,20 @@ export default function ComplaintForm({ onClose }: ComplaintFormProps) {
</button>
</div>
{/* Başarı Mesajı */}
{showSuccess && (
<div className="bg-green-50 border-l-4 border-green-500 p-4 mb-6 animate-fade-in">
<div className="flex items-center">
<svg className="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
<p className="text-sm font-medium text-green-800">
Mesajınız başarıyla gönderildi! En kısa sürede size dönüş yapılacaktır.
</p>
</div>
</div>
)}
{/* Bilgilendirme */}
<div className="bg-blue-50 border-l-4 border-[#00B4D8] p-4 mb-6">
<div className="flex items-start">
@@ -94,9 +134,9 @@ export default function ComplaintForm({ onClose }: ComplaintFormProps) {
<input
type="radio"
name="type"
value="dilek"
checked={formData.type === 'dilek'}
onChange={(e) => setFormData({...formData, type: e.target.value})}
value="oneri"
checked={formData.type === 'oneri'}
onChange={(e) => setFormData({...formData, type: e.target.value as 'oneri'})}
className="w-4 h-4 text-[#00B4D8] border-gray-300 focus:ring-[#00B4D8]"
/>
<span className="ml-2 text-gray-700">Dilek / Öneri</span>
@@ -107,11 +147,22 @@ export default function ComplaintForm({ onClose }: ComplaintFormProps) {
name="type"
value="sikayet"
checked={formData.type === 'sikayet'}
onChange={(e) => setFormData({...formData, type: e.target.value})}
onChange={(e) => setFormData({...formData, type: e.target.value as 'sikayet'})}
className="w-4 h-4 text-[#00B4D8] border-gray-300 focus:ring-[#00B4D8]"
/>
<span className="ml-2 text-gray-700">Şikayet</span>
</label>
<label className="flex items-center cursor-pointer">
<input
type="radio"
name="type"
value="bilgi"
checked={formData.type === 'bilgi'}
onChange={(e) => setFormData({...formData, type: e.target.value as 'bilgi'})}
className="w-4 h-4 text-[#00B4D8] border-gray-300 focus:ring-[#00B4D8]"
/>
<span className="ml-2 text-gray-700">Bilgi Talebi</span>
</label>
</div>
</div>
@@ -215,17 +266,31 @@ export default function ComplaintForm({ onClose }: ComplaintFormProps) {
<div className="flex flex-col sm:flex-row gap-4 pt-4">
<button
type="submit"
className="flex-1 px-6 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"
disabled={isSubmitting}
className="flex-1 px-6 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 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>
<button
type="button"
onClick={handleReset}
className="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-semibold"
disabled={isSubmitting}
className="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
>
Temizle
</button>