Dialog

import { Dialog } from '@/components/ui/Dialog';
import { Button } from '@/components/ui/Button';
 
export function DialogDemo() {
  return (
    <Dialog>
      <Dialog.Trigger as={Button} variant="secondary">
        <Button.Text>Allow Notifications</Button.Text>
      </Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Header>
          <Dialog.Title>
            `Calendar` would like to send you notifications
          </Dialog.Title>
          <Dialog.Description>
            Notifications may include alerts, sounds, and icon badges. These
            can be configured in Settings.
          </Dialog.Description>
        </Dialog.Header>
        <Dialog.Footer>
          <Dialog.Close as={Button} variant="secondary" fill>
            <Button.Text>Don't Allow</Button.Text>
          </Dialog.Close>
          <Dialog.Close as={Button} variant="secondary" fill>
            <Button.Text>Allow</Button.Text>
          </Dialog.Close>
        </Dialog.Footer>
      </Dialog.Content>
    </Dialog>
  );
}