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,18 @@
+import { cn } from '@/lib/cn'
+
+/**
+ * A plant's emoji on a tile tinted with its own color (via color-mix, so any
+ * valid CSS color works). Shared by PlantCard and the PlantPicker rows. Size and
+ * shape come from `className`.
+ */
+export function PlantIcon({ color, icon, className }: { color: string; icon: string; className?: string }) {
+  return (
+    <span
+      className={cn('grid shrink-0 place-items-center', className)}
+      style={{ backgroundColor: `color-mix(in srgb, ${color} 18%, transparent)` }}
+      aria-hidden
+    >
+      {icon}
+    </span>
+  )
+}