golomazov/hotelsync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: compact filters row with dropdowns for floor and category

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HotelSync
2026-03-23 14:04:17 +03:00
parent 3e9622d281
commit d46101b032
1 changed files with 28 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/pages/RoomsPage.tsx
View File

@@ -171,83 +171,36 @@ export function RoomsPage() {
))}
</div>
{/* Filters */}
<div className="space-y-2">
<div className="flex gap-3 flex-wrap">
<div className="relative flex-1 min-w-48">
<Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
{/* Filters — one row */}
<div className="flex items-center gap-2">
<div className="relative flex-1 max-w-xs">
<Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400" />
<input
type="text"
className="input pl-9"
className="input pl-8 text-sm"
placeholder="Поиск номера..."
value={search}
onChange={e => setSearch(e.target.value)}
/>
</div>
<div className="flex gap-1.5 flex-wrap">
<button
onClick={() => setFloorFilter('all')}
className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
floorFilter === 'all'
? 'bg-brand-600 text-white border-brand-600'
: 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600',
)}
<select
className="input text-sm w-36 shrink-0"
value={floorFilter === 'all' ? 'all' : String(floorFilter)}
onChange={e => setFloorFilter(e.target.value === 'all' ? 'all' : Number(e.target.value))}
>
Все этажи
</button>
{floors.map(f => (
<button
key={f}
onClick={() => setFloorFilter(f)}
className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
floorFilter === f
? 'bg-brand-600 text-white border-brand-600'
: 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600',
)}
>
{f} эт.
</button>
))}
</div>
</div>
{/* Category filter */}
<option value="all">Все этажи</option>
{floors.map(f => <option key={f} value={f}>{f} этаж</option>)}
</select>
{categories.length > 0 && (
<div className="flex gap-1.5 flex-wrap">
<button
onClick={() => setCategoryFilter('all')}
className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
categoryFilter === 'all'
? 'bg-slate-700 text-white border-slate-700 dark:bg-slate-200 dark:text-slate-900 dark:border-slate-200'
: 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600',
)}
<select
className="input text-sm w-44 shrink-0"
value={categoryFilter}
onChange={e => setCategoryFilter(e.target.value)}
>
Все категории
</button>
{categories.map(cat => (
<button
key={cat.id}
onClick={() => setCategoryFilter(cat.id)}
className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
categoryFilter === cat.id
? 'bg-slate-700 text-white border-slate-700 dark:bg-slate-200 dark:text-slate-900 dark:border-slate-200'
: 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600',
)}
>
{cat.name}
</button>
))}
<button
onClick={() => setCategoryFilter('')}
className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
categoryFilter === ''
? 'bg-slate-700 text-white border-slate-700 dark:bg-slate-200 dark:text-slate-900 dark:border-slate-200'
: 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600',
)}
>
Без категории
</button>
</div>
<option value="all">Все категории</option>
{categories.map(cat => <option key={cat.id} value={cat.id}>{cat.name}</option>)}
<option value="">Без категории</option>
</select>
)}
</div>