Drop a deal, the quarter answers

"use client";
import * as React from "react";
import { QuarterDrop } from "@/components/ui/notchset/blocks/quarter-drop";
import { Switch } from "@/components/ui/notchset/switch";

const k = (v: number) => `$${Math.round(v / 1000)}k`;

export default function QuarterDropDemo() {
  const [fails, setFails] = React.useState(false);
  return (
    <div className="flex w-full max-w-[560px] flex-col gap-2">
      <QuarterDrop
        columns={[
          { key: "proposal", label: "Proposal" },
          { key: "negotiation", label: "Negotiation" },
          { key: "won", label: "Won" },
        ]}
        deals={[
          { id: "q1", company: "Dropbox", color: "#0061ff", value: 48000, column: "negotiation" },
          { id: "q2", company: "Sentry", color: "#362d59", value: 96000, column: "negotiation" },
          { id: "q3", company: "Shopify", color: "#5e8e3e", value: 72000, column: "proposal" },
          { id: "q4", company: "Stripe", color: "#635bff", value: 152000, column: "won" },
        ]}
        wonColumn="won"
        quota={240000}
        wonBefore={64000}
        format={k}
        /* the host's save: resolve false and the card goes home with Retry */
        onMove={() => new Promise<boolean>((r) => setTimeout(() => r(!fails), 380))}
      />
      <label className="flex items-center justify-end gap-2 text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">
        Saves fail
        <Switch checked={fails} onCheckedChange={setFails} aria-label="Make saves fail" />
      </label>
    </div>
  );
}