Invite dialog

"use client";
import * as React from "react";
import { MailPlus } from "lucide-react";
import { type InviteAdapter, type InviteLink, InviteDialog, InviteLinkCard } from "@/components/ui/notchset/blocks/invite-dialog";
import { Button } from "@/components/ui/notchset/button";

const ROLES = [
  { value: "owner", label: "Owner", invitable: false },
  { value: "admin", label: "Admin", hint: "Admins manage members, roles and billing." },
  { value: "member", label: "Member", hint: "Members see every company, deal and report. They can’t change billing or roles." },
  { value: "guest", label: "Guest", hint: "Guests see only the records they’re added to." },
];

export default function InviteDialogDemo() {
  const [open, setOpen] = React.useState(false);
  const [sent, setSent] = React.useState<string[]>([]);
  const [link, setLink] = React.useState<InviteLink | null>({ url: "notchset.app/join/7Hq2-xK9p", role: "member", expires: "7d", uses: 0 });
  const adapter: InviteAdapter = {
    invite: ({ emails }) => setSent((s) => [...s, ...emails]),
    setLink: ({ role, expires }) => setLink((l) => ({ url: l?.url ?? "notchset.app/join/Rm4t-8bQz", role, expires, uses: l?.uses ?? 0 })),
    revokeLink: () => setLink(null),
  };
  return (
    <div className="flex w-full flex-col items-start gap-3">
      <p className="m-0 text-[var(--ns-ink-2)]">{sent.length ? `Invited ${sent.join(", ")}` : "8 of 10 seats on Team"}</p>
      <Button variant="primary" onClick={() => setOpen(true)}>
        <MailPlus />
        Invite people
      </Button>
      <InviteDialog
        open={open}
        onOpenChange={setOpen}
        workspace="Notchset"
        roles={ROLES}
        link={link}
        seatsLeft={Math.max(0, 2 - sent.length)}
        taken={["maya@notchset.com"]}
        adapter={adapter}
      />
      {/* the same link, where Invites lists it: one card, two places */}
      <InviteLinkCard link={link} roles={ROLES} adapter={adapter} className="w-full max-w-[520px]" />
    </div>
  );
}