FilterChip

function Basic() {
  const [status, setStatus] = useState(["2xx"]);
  const [op, setOp] = useState("is");
  return (
    <div className="flex items-center gap-8">
      <FilterChip
        property="Status"
        propertyIcon={icons.chart}
        operator={op}
        operators={["is", "is not"]}
        onOperatorChange={setOp}
        value={status.length > 1 ? `${status.length} classes` : (status[0] ?? "any")}
        multiple
        values={[
          { value: "2xx", label: "2xx" },
          { value: "4xx", label: "4xx" },
          { value: "5xx", label: "5xx" },
        ]}
        selected={status}
        onSelectedChange={setStatus}
        onRemove={() => setStatus([])}
      />
      <Button variant="ghost" size="sm" leadingIcon={icons.add}>
        Add filter
      </Button>
    </div>
  );
}