Reason popover

"use client";
import * as React from "react";
import { Button } from "@/components/ui/notchset/button";
import { ReasonPopover } from "@/components/ui/notchset/reason-popover";

export default function ReasonPopoverDemo() {
  const [denied, setDenied] = React.useState<string | null>(null);
  return (
    <div className="flex items-center gap-3">
      <ReasonPopover
        trigger={<Button size="sm">Deny</Button>}
        title="Why deny Q-1047?"
        label="What would you approve instead?"
        placeholder="e.g. 15% with a 2-year term"
        verb="Deny"
        align="start"
        onSubmit={(reason) => setDenied(reason)}
      />
      {denied && <span className="text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">Denied: {denied}</span>}
    </div>
  );
}