This commit is contained in:
@ -1025,81 +1025,83 @@ const handleMapClick = async (coords) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-4">شروط استخدام العقار</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{termsList.map((term) => {
|
||||
const Icon = term.icon;
|
||||
return (
|
||||
<label
|
||||
key={term.id}
|
||||
className={`flex items-center gap-2 p-3 border rounded-xl cursor-pointer transition-all ${
|
||||
formData.terms[term.id]
|
||||
? 'border-amber-500 bg-amber-50'
|
||||
: 'border-gray-200 hover:border-amber-200 hover:bg-amber-50/50'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.terms[term.id]}
|
||||
onChange={() => toggleTerm(term.id)}
|
||||
className="hidden"
|
||||
/>
|
||||
<Icon className={`w-5 h-5 ${
|
||||
formData.terms[term.id] ? 'text-amber-600' : 'text-gray-400'
|
||||
}`} />
|
||||
<span className={`text-sm ${
|
||||
formData.terms[term.id] ? 'text-amber-700' : 'text-gray-600'
|
||||
}`}>
|
||||
{term.label}
|
||||
</span>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Custom Terms */}
|
||||
<div className="mt-4 p-4 border border-dashed border-gray-300 rounded-xl">
|
||||
<p className="text-sm font-medium text-gray-700 mb-2">إضافة شرط مخصص</p>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={customTermInput}
|
||||
onChange={(e) => setCustomTermInput(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addCustomTerm(); } }}
|
||||
placeholder="اكتب شرطاً مخصصاً..."
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addCustomTerm}
|
||||
disabled={!customTermInput.trim()}
|
||||
className="px-4 py-2 bg-amber-500 text-white rounded-lg text-sm font-medium hover:bg-amber-600 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
إضافة
|
||||
</button>
|
||||
</div>
|
||||
{customTerms.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-3">
|
||||
{customTerms.map((term) => (
|
||||
<span
|
||||
key={term}
|
||||
className="inline-flex items-center gap-1 px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm"
|
||||
{purpose === 'rent' && (
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-4">شروط استخدام العقار</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{termsList.map((term) => {
|
||||
const Icon = term.icon;
|
||||
return (
|
||||
<label
|
||||
key={term.id}
|
||||
className={`flex items-center gap-2 p-3 border rounded-xl cursor-pointer transition-all ${
|
||||
formData.terms[term.id]
|
||||
? 'border-amber-500 bg-amber-50'
|
||||
: 'border-gray-200 hover:border-amber-200 hover:bg-amber-50/50'
|
||||
}`}
|
||||
>
|
||||
{term}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeCustomTerm(term)}
|
||||
className="hover:text-red-600 transition-colors"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.terms[term.id]}
|
||||
onChange={() => toggleTerm(term.id)}
|
||||
className="hidden"
|
||||
/>
|
||||
<Icon className={`w-5 h-5 ${
|
||||
formData.terms[term.id] ? 'text-amber-600' : 'text-gray-400'
|
||||
}`} />
|
||||
<span className={`text-sm ${
|
||||
formData.terms[term.id] ? 'text-amber-700' : 'text-gray-600'
|
||||
}`}>
|
||||
{term.label}
|
||||
</span>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Custom Terms */}
|
||||
<div className="mt-4 p-4 border border-dashed border-gray-300 rounded-xl">
|
||||
<p className="text-sm font-medium text-gray-700 mb-2">إضافة شرط مخصص</p>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={customTermInput}
|
||||
onChange={(e) => setCustomTermInput(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addCustomTerm(); } }}
|
||||
placeholder="اكتب شرطاً مخصصاً..."
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addCustomTerm}
|
||||
disabled={!customTermInput.trim()}
|
||||
className="px-4 py-2 bg-amber-500 text-white rounded-lg text-sm font-medium hover:bg-amber-600 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
إضافة
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{customTerms.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-3">
|
||||
{customTerms.map((term) => (
|
||||
<span
|
||||
key={term}
|
||||
className="inline-flex items-center gap-1 px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm"
|
||||
>
|
||||
{term}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeCustomTerm(term)}
|
||||
className="hover:text-red-600 transition-colors"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user