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

Tighten gallery spacing and add filter dividers

Browse Source
This commit is contained in:
Codex Agent
2026-01-14 15:08:28 +01:00
parent d3ef54a410
commit 22931f1500
2 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,22 +43,29 @@ export default function FiltersBar({
style={styleOverride}
>
<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>
))}
{filters.map((filter, index) => {
const isActive = value === filter.value;
return (
<div key={filter.value} className="flex items-center">
<button
type="button"
onClick={() => onChange(filter.value)}
className={cn(
'inline-flex items-center gap-1 rounded-full px-3 py-1.5 transition',
isActive
? '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>
{index < filters.length - 1 && (
<span className="mx-1 h-4 w-px bg-border/60 dark:bg-white/10" aria-hidden />
)}
</div>
);
})}
</div>
</div>
);