230417/smartagenda_pap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: optimize filter dropdown layout and styling in Explore page

Browse Source
This commit is contained in:
230417
2026-05-04 09:21:49 +01:00
parent 175efea276
commit 946ab7ec49
1 changed files with 6 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/pages/Explore.tsx
View File

@@ -87,11 +87,9 @@ export default function Explore() {
<div className="h-10 w-px bg-slate-200 hidden md:block" />
<div className="px-2 sm:px-4 py-2 w-full md:w-auto">
<div className="relative group">
<div className="absolute inset-y-0 left-0 pl-3 sm:pl-4 flex items-center pointer-events-none">
<ListFilter size={18} className="text-slate-400 group-hover:text-indigo-500 transition-colors" />
</div>
<div className="px-2 sm:px-4 py-2 w-full md:w-auto flex-shrink-0">
<div className="relative group w-full md:w-auto">
<ListFilter size={18} className="absolute left-3 sm:left-4 top-1/2 -translate-y-1/2 text-slate-400 group-hover:text-indigo-500 transition-colors pointer-events-none" />
<select
value={`${filter}-${sortBy}`}
onChange={(e) => {
@@ -99,15 +97,14 @@ export default function Explore() {
setFilter(newFilter as 'todas' | 'top');
setSortBy(newSort as 'avaliacao' | 'servicos');
}}
className="h-10 sm:h-12 w-full sm:w-auto appearance-none rounded-xl sm:rounded-2xl bg-slate-100/80 hover:bg-slate-200/80 border-none pl-10 sm:pl-12 pr-10 sm:pr-12 text-xs sm:text-sm font-bold text-slate-700 transition-all focus:ring-2 focus:ring-indigo-500/30 shadow-sm cursor-pointer"
style={{ WebkitAppearance: 'none', MozAppearance: 'none', backgroundImage: 'none' }}
className="block h-10 sm:h-12 w-full md:w-auto appearance-none rounded-xl sm:rounded-2xl bg-slate-100 hover:bg-slate-200/80 border-none pl-10 sm:pl-11 pr-10 sm:pr-11 text-xs sm:text-sm font-bold text-slate-700 transition-all focus:ring-2 focus:ring-indigo-500/30 shadow-sm cursor-pointer m-0"
>
<option value="todas-avaliacao">Todas (Melhor avaliação)</option>
<option value="top-avaliacao">Top Avaliadas</option>
<option value="todas-servicos">Mais Serviços</option>
</select>
<div className="absolute inset-y-0 right-0 pr-3 sm:pr-4 flex items-center pointer-events-none">
<ChevronDown size={16} className="text-slate-400 group-hover:text-indigo-500 transition-colors" />
</div>
<ChevronDown size={16} className="absolute right-3 sm:right-4 top-1/2 -translate-y-1/2 text-slate-400 group-hover:text-indigo-500 transition-colors pointer-events-none" />
</div>
</div>
</div>