Plant catalog UI: /plants page + PlantPicker (#13)

Co-authored-by: Steve Dudenhoeffer <[email protected]>
2026-07-19 02:18:12 +00:00
parent 293532f021
commit e4505ed9a7
10 changed files with 848 additions and 3 deletions
@@ -0,0 +1,37 @@
+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>
+  )
+}