Filter button

"use client";
import * as React from "react";
import { Filter, UserRound } from "lucide-react";
import { FilterButton } from "@/components/ui/notchset/filter-button";

const STAGES = { Discovery: "#8f9bb3", Evaluation: "#38a6d6", Proposal: "#9b87f5", "Security review": "#e3a33b", Procurement: "#ec7d55" };
const OWNERS = ["Ana Ruiz", "Kevin Ito", "Priya Shah", "Marcus Bell"];

export default function FilterButtonDemo() {
  const [stages, setStages] = React.useState<string[]>(["Proposal"]);
  const [owners, setOwners] = React.useState<string[]>([]);
  return (
    <div className="flex flex-wrap gap-2">
      <FilterButton
        label="Stage"
        icon={<Filter />}
        value={stages}
        onValueChange={setStages}
        options={Object.entries(STAGES).map(([k, c]) => ({ value: k, label: k, icon: <span className="size-2 rounded-full" style={{ background: c }} /> }))}
      />
      <FilterButton label="Owner" icon={<UserRound />} value={owners} onValueChange={setOwners} options={OWNERS.map((o) => ({ value: o, label: o }))} />
    </div>
  );
}