对话框 Dialog

<dialog class="xxd-dialog" id="d1" aria-labelledby="d1-title">
  <div class="xxd-dialog__head"><h2 class="xxd-dialog__title" id="d1-title">写入哪篇文章？</h2></div>
  <div class="xxd-dialog__body"><p>默认不会替换已有内容。</p></div>
  <div class="xxd-dialog__actions">
    <button class="xxd-btn ui-dialog-cancel" data-xxd-dialog-close>取消</button>
    <button class="xxd-btn" data-variant="primary" data-xxd-dialog-close="new">写入为新文章</button>
  </div>
</dialog>
<button class="xxd-btn" data-xxd-dialog-open="d1">打开</button>

export function DialogDemo() {
  return (
    <Dialog.Root>
      <Dialog.Trigger render={(p) => <Button {...p}>打开</Button>} />
      <Dialog className="p-6">
        <Dialog.Title className="text-lg font-semibold">写入哪篇文章？</Dialog.Title>
        <Dialog.Description className="mt-2 text-kumo-subtle">默认不会替换已有内容。</Dialog.Description>
        <DialogActions className="mt-6">
          <Dialog.Close render={(p) => <Button variant="ghost" data-xxd-cancel {...p}>取消</Button>} />
          <Dialog.Close render={(p) => <Button variant="primary" {...p}>写入为新文章</Button>} />
        </DialogActions>
      </Dialog>
    </Dialog.Root>
  );
}