soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Tighten gallery filters and badge placement

Browse Source
This commit is contained in:
Codex Agent
2026-01-14 14:04:31 +01:00
parent 318f812adf
commit d3ef54a410
2 changed files with 31 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
resources/js/guest/components/FiltersBar.tsx
View File

@@ -37,27 +37,29 @@ export default function FiltersBar({
return (
<div
className={cn(
'flex gap-2 overflow-x-auto px-4 pb-2 text-sm font-medium [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
'flex overflow-x-auto px-1 pb-2 text-xs font-semibold [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
className,
)}
style={styleOverride}
>
{filters.map((filter) => (
<button
key={filter.value}
type="button"
onClick={() => onChange(filter.value)}
className={cn(
'inline-flex items-center gap-2 rounded-full border px-4 py-2 transition',
value === filter.value
? 'border-pink-500 bg-gradient-to-r from-pink-500 to-pink-600 text-white shadow'
: 'border-transparent bg-white/70 text-muted-foreground hover:border-pink-200',
)}
>
{filter.icon}
{t(filter.labelKey)}
</button>
))}
<div className="inline-flex items-center rounded-full border border-border/70 bg-white/80 p-1 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/70">
{filters.map((filter, index) => (
<button
key={filter.value}
type="button"
onClick={() => onChange(filter.value)}
className={cn(
'inline-flex items-center gap-1 rounded-full px-3 py-1.5 transition',
value === filter.value
? 'bg-pink-500 text-white shadow'
: 'text-muted-foreground hover:bg-pink-50 hover:text-pink-600',
)}
>
{React.cloneElement(filter.icon as React.ReactElement, { className: 'h-3.5 w-3.5' })}
<span className="whitespace-nowrap">{t(filter.labelKey)}</span>
</button>
))}
</div>
</div>
);
}