Command bar

"use client";
import * as React from "react";
import { CommandBar, type CommandVerb } from "@/components/ui/notchset/blocks/command-bar";

const STAGES = ["Discovery", "Evaluation", "Proposal", "Security review", "Procurement"] as const;
type Stage = (typeof STAGES)[number];
/* the share of a deal's value its stage counts toward the forecast */
const WEIGHT: Record<Stage, number> = { Discovery: 0.1, Evaluation: 0.25, Proposal: 0.5, "Security review": 0.7, Procurement: 0.9 };
const k = (v: number) => `$${Math.round(v / 1000)}k`;
const startsWith = (word: string) => (x: string) => x.toLowerCase().startsWith(word.toLowerCase());

export default function CommandBarDemo() {
  const [deals, setDeals] = React.useState<{ name: string; value: number; stage: Stage }[]>([
    { name: "Webflow", value: 214500, stage: "Security review" },
    { name: "Airtable", value: 118000, stage: "Discovery" },
    { name: "Stripe", value: 126000, stage: "Security review" },
  ]);
  const move: CommandVerb<{ i: number; to: Stage }> = {
    id: "move",
    example: "move webflow to procurement",
    parse: (q) => {
      const m = /^move\s+(\w+)\s+to\s+(.+)$/i.exec(q);
      if (!m) return null;
      const i = deals.findIndex((d) => startsWith(m[1]!)(d.name));
      const to = STAGES.find(startsWith(m[2]!.trim()));
      if (i < 0 || !to) return null;
      return { parts: [{ text: "Move", kind: "verb" }, { text: deals[i]!.name }, { text: to, kind: "target" }], value: { i, to } };
    },
    preview: ({ i, to }) => {
      const d = deals[i]!;
      return `${d.stage} → ${to} · weighted ${k(d.value * WEIGHT[d.stage])} → ${k(d.value * WEIGHT[to])}`;
    },
    complete: (q) => {
      const m = /^move\s+(\w*)$/i.exec(q);
      const d = m && deals.find((x) => startsWith(m[1]!)(x.name));
      return d ? `move ${d.name.toLowerCase()} to ` : /^m(o(ve?)?)?$/i.test(q) ? "move " : null;
    },
    run: ({ i, to }) => setDeals((ds) => ds.map((d, j) => (j === i ? { ...d, stage: to } : d))),
  };
  return (
    <div className="flex w-full max-w-[560px] flex-col gap-4">
      <CommandBar label="Tell the CRM what to do" verbs={[move]} />
      <ul className="m-0 flex list-none flex-col p-0 text-[length:var(--ns-text-small)]">
        {deals.map((d) => (
          <li key={d.name} className="flex items-center gap-2.5 border-b border-[var(--ns-line-soft)] py-2 last:border-b-0">
            <span className="flex-1">{d.name}</span>
            <span className="text-[var(--ns-ink-3)]">{d.stage}</span>
            <span className="w-16 text-right tabular-nums">{k(d.value * WEIGHT[d.stage])}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}