Rahaf/SweetHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hide rent-type fields on buy/sell tabs and disable auto-search on tab click
Some checks failed
Build frontend / build (push) Failing after 56s
Details

Browse Source 
- Property type and rent period fields now only display when 'Rent' tab is active
- Adjusted grid column spans to fill layout when fields are hidden
- Tab switching no longer triggers an automatic search; search runs only on button click
This commit is contained in:
Rahaf
2026-06-16 15:18:29 +03:00
parent 224c29bc19
commit 64d422ddd8
1 changed files with 50 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
app/components/home/HeroSearch.js
View File

@ -67,9 +67,7 @@ export default function HeroSearch({ onSearch, isAuthenticated }) {
setActiveTab(tab); setActiveTab(tab);
if ((tab === 'rent' || tab === 'sell') && !isAuthenticated) { if ((tab === 'rent' || tab === 'sell') && !isAuthenticated) {
setShowLoginDialog(true); setShowLoginDialog(true);
return;
} }
handleSearch();
}; };
const handleSearch = () => { const handleSearch = () => {
@ -139,30 +137,32 @@ export default function HeroSearch({ onSearch, isAuthenticated }) {
))} ))}
</select> </select>
</div> </div>
<div> {activeTab === 'rent' && (
<label className="block text-sm font-medium text-white mb-2"> <div>
<div className="flex items-center gap-1"> <label className="block text-sm font-medium text-white mb-2">
<Home className="w-4 h-4" /> <div className="flex items-center gap-1">
{t("rentTypeLabel")} <Home className="w-4 h-4" />
</div> {t("rentTypeLabel")}
</label> </div>
<select </label>
value={filters.propertyType} <select
onChange={(e) => setFilters({...filters, propertyType: e.target.value})} value={filters.propertyType}
className="w-full px-4 py-3 bg-white/90 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm appearance-none cursor-pointer" onChange={(e) => setFilters({...filters, propertyType: e.target.value})}
style={{ className="w-full px-4 py-3 bg-white/90 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm appearance-none cursor-pointer"
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`, style={{
backgroundRepeat: 'no-repeat', backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
backgroundPosition: 'left 1rem center', backgroundRepeat: 'no-repeat',
backgroundSize: '1rem', backgroundPosition: 'left 1rem center',
paddingLeft: '2.5rem' backgroundSize: '1rem',
}} paddingLeft: '2.5rem'
> }}
{propertyTypes.map(type => ( >
<option key={type.id} value={type.id}>{type.label}</option> {propertyTypes.map(type => (
))} <option key={type.id} value={type.id}>{type.label}</option>
</select> ))}
</div> </select>
</div>
)}
<div> <div>
<label className="block text-sm font-medium text-white mb-2"> <label className="block text-sm font-medium text-white mb-2">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
@ -234,29 +234,31 @@ export default function HeroSearch({ onSearch, isAuthenticated }) {
</select> </select>
</div> </div>
<div> {activeTab === 'rent' && (
<label className="block text-sm font-medium text-white mb-2">نوع الإيجار</label> <div>
<select <label className="block text-sm font-medium text-white mb-2">نوع الإيجار</label>
value={filters.rentPeriod} <select
onChange={(e) => setFilters({ ...filters, rentPeriod: e.target.value })} value={filters.rentPeriod}
className="w-full px-4 py-3 bg-white/90 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm appearance-none cursor-pointer" onChange={(e) => setFilters({ ...filters, rentPeriod: e.target.value })}
style={{ className="w-full px-4 py-3 bg-white/90 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm appearance-none cursor-pointer"
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`, style={{
backgroundRepeat: 'no-repeat', backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
backgroundPosition: 'left 1rem center', backgroundRepeat: 'no-repeat',
backgroundSize: '1rem', backgroundPosition: 'left 1rem center',
paddingLeft: '2.5rem' backgroundSize: '1rem',
}} paddingLeft: '2.5rem'
> }}
{rentPeriods.map((period) => ( >
<option key={period.id} value={period.id}> {rentPeriods.map((period) => (
{period.label} <option key={period.id} value={period.id}>
</option> {period.label}
))} </option>
</select> ))}
</div> </select>
</div>
)}
<div className="md:col-span-2 flex flex-col justify-between p-4 rounded-2xl border border-dashed border-white/30 bg-white/5"> <div className={`${activeTab === 'rent' ? 'md:col-span-2' : 'md:col-span-3'} flex flex-col justify-between p-4 rounded-2xl border border-dashed border-white/30 bg-white/5`}>
<label className="mt-4 flex items-center gap-3 text-white text-sm"> <label className="mt-4 flex items-center gap-3 text-white text-sm">
<input <input
type="checkbox" type="checkbox"