238 lines
9.4 KiB
TypeScript
238 lines
9.4 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
|
||
interface ComplaintFormProps {
|
||
onClose: () => void;
|
||
}
|
||
|
||
interface FormData {
|
||
name: string;
|
||
email: string;
|
||
phone: string;
|
||
subject: string;
|
||
type: string;
|
||
message: string;
|
||
}
|
||
|
||
export default function ComplaintForm({ onClose }: ComplaintFormProps) {
|
||
const [formData, setFormData] = useState<FormData>({
|
||
name: '',
|
||
email: '',
|
||
phone: '',
|
||
subject: '',
|
||
type: 'dilek',
|
||
message: ''
|
||
});
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
alert('Form gönderildi! (Demo)');
|
||
handleReset();
|
||
onClose();
|
||
};
|
||
|
||
const handleReset = () => {
|
||
setFormData({
|
||
name: '',
|
||
email: '',
|
||
phone: '',
|
||
subject: '',
|
||
type: 'dilek',
|
||
message: ''
|
||
});
|
||
};
|
||
|
||
const handleClose = () => {
|
||
handleReset();
|
||
onClose();
|
||
};
|
||
|
||
return (
|
||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 md:pt-32 pb-8">
|
||
<div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
|
||
<div className="flex items-center justify-between mb-6">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-10 h-10 bg-[#004B87] rounded-lg flex items-center justify-center">
|
||
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||
</svg>
|
||
</div>
|
||
<h2 className="text-2xl font-bold text-[#004B87]">Dilek ve Şikayet Formu</h2>
|
||
</div>
|
||
<button
|
||
onClick={handleClose}
|
||
className="text-gray-500 hover:text-red-500 transition-colors"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Bilgilendirme */}
|
||
<div className="bg-blue-50 border-l-4 border-[#00B4D8] p-4 mb-6">
|
||
<div className="flex items-start">
|
||
<svg className="w-5 h-5 text-[#00B4D8] mt-0.5 mr-3 shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
|
||
</svg>
|
||
<p className="text-sm text-gray-700">
|
||
A2 Metro Hattı projesi ile ilgili dilek, öneri ve şikayetlerinizi bu form aracılığıyla iletebilirsiniz. Başvurularınız en kısa sürede değerlendirilecektir.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Form */}
|
||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||
{/* Başvuru Tipi */}
|
||
<div>
|
||
<label className="block text-sm font-semibold text-[#004B87] mb-3">
|
||
Başvuru Tipi <span className="text-red-500">*</span>
|
||
</label>
|
||
<div className="flex gap-4">
|
||
<label className="flex items-center cursor-pointer">
|
||
<input
|
||
type="radio"
|
||
name="type"
|
||
value="dilek"
|
||
checked={formData.type === 'dilek'}
|
||
onChange={(e) => setFormData({...formData, type: e.target.value})}
|
||
className="w-4 h-4 text-[#00B4D8] border-gray-300 focus:ring-[#00B4D8]"
|
||
/>
|
||
<span className="ml-2 text-gray-700">Dilek / Öneri</span>
|
||
</label>
|
||
<label className="flex items-center cursor-pointer">
|
||
<input
|
||
type="radio"
|
||
name="type"
|
||
value="sikayet"
|
||
checked={formData.type === 'sikayet'}
|
||
onChange={(e) => setFormData({...formData, type: e.target.value})}
|
||
className="w-4 h-4 text-[#00B4D8] border-gray-300 focus:ring-[#00B4D8]"
|
||
/>
|
||
<span className="ml-2 text-gray-700">Şikayet</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
{/* İki Sütunlu Alan */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
{/* Ad Soyad */}
|
||
<div>
|
||
<label htmlFor="name" className="block text-sm font-semibold text-[#004B87] mb-2">
|
||
Ad Soyad <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="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"
|
||
/>
|
||
</div>
|
||
|
||
{/* E-posta */}
|
||
<div>
|
||
<label htmlFor="email" className="block text-sm font-semibold text-[#004B87] mb-2">
|
||
E-posta <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="email"
|
||
id="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"
|
||
/>
|
||
</div>
|
||
|
||
{/* Telefon */}
|
||
<div>
|
||
<label htmlFor="phone" className="block text-sm font-semibold text-[#004B87] mb-2">
|
||
Telefon
|
||
</label>
|
||
<input
|
||
type="tel"
|
||
id="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__) ___ __ __"
|
||
/>
|
||
</div>
|
||
|
||
{/* Konu */}
|
||
<div>
|
||
<label htmlFor="subject" className="block text-sm font-semibold text-[#004B87] mb-2">
|
||
Konu <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="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="Başvuru konusu"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Mesaj */}
|
||
<div>
|
||
<label htmlFor="message" className="block text-sm font-semibold text-[#004B87] mb-2">
|
||
Mesajınız <span className="text-red-500">*</span>
|
||
</label>
|
||
<textarea
|
||
id="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 detaylı bilgi veriniz..."
|
||
></textarea>
|
||
</div>
|
||
|
||
{/* KVKK Onayı */}
|
||
<div className="flex items-start">
|
||
<input
|
||
type="checkbox"
|
||
id="kvkk"
|
||
required
|
||
className="w-4 h-4 mt-1 text-[#00B4D8] border-gray-300 rounded focus:ring-[#00B4D8]"
|
||
/>
|
||
<label htmlFor="kvkk" className="ml-3 text-sm text-gray-700">
|
||
<span className="text-red-500">*</span> Kişisel verilerimin işlenmesine ilişkin{' '}
|
||
<span className="text-[#00B4D8] hover:underline">KVKK Aydınlatma Metni</span>'ni okudum ve kabul ediyorum.
|
||
</label>
|
||
</div>
|
||
|
||
{/* Butonlar */}
|
||
<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"
|
||
>
|
||
<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"
|
||
>
|
||
Temizle
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|