<arc-dialog
  heading="Discard Draft?"
  message="You have unsaved changes that will be permanently lost."
  confirm-label="Discard"
  cancel-label="Keep Editing"
  variant="danger"
></arc-dialog>

<script>
  const dialog = document.querySelector('arc-dialog');
  // Promise-based API
  const confirmed = await dialog.confirm();
  if (confirmed) discardDraft();
</script>

import { Dialog } from '@arclux/arc-ui-react';
import { useRef } from 'react';

function App() {
  const ref = useRef(null);

  const handleDiscard = async () => {
    const confirmed = await ref.current.confirm();
    if (confirmed) discardDraft();
  };

  return (
    <>
      <button onClick={handleDiscard}>Discard</button>
      <Dialog
        ref={ref}
        heading="Discard Draft?"
        message="You have unsaved changes that will be permanently lost."
        confirm-label="Discard"
        cancel-label="Keep Editing"
        variant="danger"
      />
    </>
  );
}

<script setup>
import { ref } from 'vue';
import { Dialog } from '@arclux/arc-ui-vue';

const dialogRef = ref(null);

async function handleDiscard() {
  const confirmed = await dialogRef.value.confirm();
  if (confirmed) discardDraft();
}
</script>

<template>
  <button @click="handleDiscard">Discard</button>
  <Dialog
    ref="dialogRef"
    heading="Discard Draft?"
    message="You have unsaved changes that will be permanently lost."
    confirm-label="Discard"
    cancel-label="Keep Editing"
    variant="danger"
  />
</template>

<script>
  import { Dialog } from '@arclux/arc-ui-svelte';
  let dialogEl;

  async function handleDiscard() {
    const confirmed = await dialogEl.confirm();
    if (confirmed) discardDraft();
  }
</script>

<button on:click={handleDiscard}>Discard</button>
<Dialog
  bind:this={dialogEl}
  heading="Discard Draft?"
  message="You have unsaved changes that will be permanently lost."
  confirmLabel="Discard"
  cancelLabel="Keep Editing"
  variant="danger"
/>

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Dialog } from '@arclux/arc-ui-angular';

@Component({
  imports: [Dialog],
  template: `
    <button (click)="handleDiscard()">Discard</button>
    <Dialog #dialog
      heading="Discard Draft?"
      message="You have unsaved changes that will be permanently lost."
      confirmLabel="Discard"
      cancelLabel="Keep Editing"
      variant="danger"
    />
  `,
})
export class MyComponent {
  @ViewChild('dialog') dialog!: ElementRef;

  async handleDiscard() {
    const confirmed = await this.dialog.nativeElement.confirm();
    if (confirmed) this.discardDraft();
  }
}

import { Dialog } from '@arclux/arc-ui-solid';

let dialogEl;

async function handleDiscard() {
  const confirmed = await dialogEl.confirm();
  if (confirmed) discardDraft();
}

<button onClick={handleDiscard}>Discard</button>
<Dialog
  ref={dialogEl}
  heading="Discard Draft?"
  message="You have unsaved changes that will be permanently lost."
  confirmLabel="Discard"
  cancelLabel="Keep Editing"
  variant="danger"
/>

import { Dialog } from '@arclux/arc-ui-preact';
import { useRef } from 'preact/hooks';

function App() {
  const ref = useRef(null);

  const handleDiscard = async () => {
    const confirmed = await ref.current.confirm();
    if (confirmed) discardDraft();
  };

  return (
    <>
      <button onClick={handleDiscard}>Discard</button>
      <Dialog
        ref={ref}
        heading="Discard Draft?"
        message="You have unsaved changes that will be permanently lost."
        confirmLabel="Discard"
        cancelLabel="Keep Editing"
        variant="danger"
      />
    </>
  );
}