FilterRow

function Settings() {
  const [state, setState] = useState("all");
  const [preset, setPreset] = useState("all");
  const items: ListItemData[] = members
    .filter((m) => preset === "all" || m.preset === preset)
    .filter(() => state !== "suspended")
    .map((m) => ({ id: m.id, title: m.name, subtitle: m.email, meta: <Badge>{m.preset}</Badge> }));
  return (
    <Column>
      <FilterRow tabs={stateTabs(state, setState)}>
        <Select aria-label="Preset" size="sm" value={preset} onValueChange={(v) => setPreset(String(v))} options={presetOptions} />
      </FilterRow>
      <List
        aria-label="Members"
        items={items}
        empty={<Empty size="md" title="No suspended members" description="Suspended members can't sign in. Everyone in Northwind Labs is active." />}
      />
    </Column>
  );
}