steve
e4505ed9a7
Build image / build-and-push (push) Successful in 15s
Co-authored-by: Steve Dudenhoeffer <[email protected]>
38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import { cn } from '@/lib/cn'
|
|
import { CATEGORY_LABELS, PLANT_CATEGORIES, type CategoryFilter } from '@/lib/plants'
|
|
|
|
/**
|
|
* Horizontal, scrollable "All + each category" chip row. Shared by the /plants
|
|
* page and the PlantPicker so both filter the catalog identically.
|
|
*/
|
|
export function CategoryChips({
|
|
value,
|
|
onChange,
|
|
size = 'md',
|
|
}: {
|
|
value: CategoryFilter
|
|
onChange: (c: CategoryFilter) => void
|
|
size?: 'sm' | 'md'
|
|
}) {
|
|
const chip = (v: CategoryFilter, label: string) => (
|
|
<button
|
|
key={v}
|
|
type="button"
|
|
onClick={() => onChange(v)}
|
|
className={cn(
|
|
'shrink-0 rounded-full px-3 font-medium transition-colors',
|
|
size === 'sm' ? 'py-1 text-xs' : 'py-1 text-sm',
|
|
value === v ? 'bg-accent text-accent-contrast' : 'bg-border/50 text-muted hover:text-fg',
|
|
)}
|
|
>
|
|
{label}
|
|
</button>
|
|
)
|
|
return (
|
|
<div className="flex gap-1.5 overflow-x-auto">
|
|
{chip('all', 'All')}
|
|
{PLANT_CATEGORIES.map((c) => chip(c, CATEGORY_LABELS[c]))}
|
|
</div>
|
|
)
|
|
}
|