demeter

Autonomous Hydroponic Intelligence

frontend/src/components/ui/FilterPill.jsx (650B)


 1export default function FilterPill({
 2  active,
 3  onClick,
 4  children,
 5  className = "",
 6  style = {},
 7}) {
 8  return (
 9    <button
10      onClick={onClick}
11      className={className}
12      style={{
13        padding: "5px 12px",
14        borderRadius: 20,
15        fontSize: 11,
16        fontFamily: "DM Mono, monospace",
17        cursor: "pointer",
18        background: active ? "rgba(74,222,128,0.15)" : "var(--surface)",
19        border: `1px solid ${active ? "rgba(74,222,128,0.4)" : "var(--border)"}`,
20        color: active ? "var(--green)" : "var(--text-3)",
21        flexShrink: 0,
22        ...style,
23      }}
24    >
25      {children}
26    </button>
27  );
28}