Property pill

"use client";
import * as React from "react";
import { Tag } from "lucide-react";
import { Menu, MenuItem } from "@/components/ui/notchset/menu";
import { PriorityMark } from "@/components/ui/notchset/priority-mark";
import { PropertyPill } from "@/components/ui/notchset/property-pill";
import { StatusGlyph } from "@/components/ui/notchset/status-glyph";

const PRI = ["No priority", "Low", "Medium", "High", "Urgent"] as const;

export default function PropertyPillDemo() {
  const [priority, setPriority] = React.useState<0 | 1 | 2 | 3 | 4>(3);
  const [labels, setLabels] = React.useState<string[]>([]);
  return (
    <div className="flex flex-wrap gap-1.5">
      <PropertyPill kind="Status" icon={<StatusGlyph status="review" label="Recalculate ETA" />}>In review</PropertyPill>
      <Menu trigger={<PropertyPill kind="Priority" icon={<PriorityMark priority={priority} />}>{PRI[priority]}</PropertyPill>}>
        {([4, 3, 2, 1, 0] as const).map((p) => (
          <MenuItem key={p} icon={<PriorityMark priority={p} />} onClick={() => setPriority(p)}>
            {PRI[p]}
          </MenuItem>
        ))}
      </Menu>
      <Menu trigger={<PropertyPill kind="Labels" icon={<Tag />} empty="Labels">{labels.join(", ")}</PropertyPill>}>
        {["Backend", "Frontend", "Design"].map((l) => (
          <MenuItem key={l} icon={<Tag />} onClick={() => setLabels((x) => (x.includes(l) ? x.filter((y) => y !== l) : [...x, l]))}>
            {l}
          </MenuItem>
        ))}
      </Menu>
      <PropertyPill kind="Due" tone="bad">3 days late</PropertyPill>
    </div>
  );
}