.dialog-brand {
  --rca-button-bg: #4f46e5;
}

'use client'
import { confirm } from 'react-confirm-alert'
import './brand-color.css'

export function BrandColor() {
  return (
    <button
      onClick={() =>
        confirm({
          title: 'Publish this post?',
          message: 'It goes live for everyone right away.',
          confirmLabel: 'Publish',
          classNames: { dialog: 'dialog-brand' },
        })
      }
    >
      Publish
    </button>
  )
}

.dialog-round {
  --rca-radius: 24px;
  --rca-button-radius: 999px;
}

'use client'
import { alert } from 'react-confirm-alert'
import './round-corners.css'

export function RoundCorners() {
  return (
    <button
      onClick={() =>
        alert({
          title: 'Saved',
          message: 'Your changes are live.',
          classNames: { dialog: 'dialog-round' },
        })
      }
    >
      Save
    </button>
  )
}

.dialog-sharp {
  --rca-radius: 0;
  --rca-button-radius: 0;
}

'use client'
import { confirm } from 'react-confirm-alert'
import './sharp-corners.css'

export function SharpCorners() {
  return (
    <button
      onClick={() =>
        confirm({
          title: 'Archive 12 files?',
          message: 'You can restore them from the archive.',
          confirmLabel: 'Archive',
          classNames: { dialog: 'dialog-sharp' },
        })
      }
    >
      Archive
    </button>
  )
}

.dialog-compact {
  --rca-width: 320px;
  --rca-padding: 16px;
  --rca-gap: 4px;
}

'use client'
import { prompt } from 'react-confirm-alert'
import './compact.css'

export function Compact() {
  return (
    <button
      onClick={() =>
        prompt({
          title: 'New folder',
          label: 'Name',
          defaultValue: 'Untitled',
          classNames: { dialog: 'dialog-compact' },
        })
      }
    >
      New folder
    </button>
  )
}

'use client'
import { useState } from 'react'
import { Dialog, DialogLayout } from 'react-confirm-alert'

// In your app the attribute (or class="dark") goes on <html>.
export function DarkMode() {
  const [open, setOpen] = useState(false)
  return (
    <div data-theme="dark">
      <button onClick={() => setOpen(true)}>Sign out</button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogLayout
          title="Sign out?"
          message="You can sign back in at any time."
          actions={[
            { label: 'Cancel', onClick: () => setOpen(false) },
            {
              label: 'Sign out',
              variant: 'primary',
              onClick: () => setOpen(false),
            },
          ]}
        />
      </Dialog>
    </div>
  )
}

.button-fill {
  flex-grow: 1;
}

'use client'
import { confirm } from 'react-confirm-alert'
import './full-width-buttons.css'

export function FullWidthButtons() {
  return (
    <button
      onClick={() =>
        confirm({
          title: 'Leave without saving?',
          message: 'Your edits on this page will be lost.',
          confirmLabel: 'Leave',
          cancelLabel: 'Stay',
          classNames: { button: 'button-fill' },
        })
      }
    >
      Leave page
    </button>
  )
}

.title-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.title-icon svg {
  flex: none;
  color: #dc2626;
}

'use client'
import { confirm } from 'react-confirm-alert'
import './icon-title.css'

export const WarningIcon = () => (
  <svg
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <path d="M12 3 2 20h20Z" />
    <path d="M12 9v4m0 3v.01" />
  </svg>
)

export function IconTitle() {
  return (
    <button
      onClick={() =>
        confirm({
          title: (
            <span className="title-icon">
              <WarningIcon /> Delete project?
            </span>
          ),
          message: 'This deletes acme-web and all of its deploys.',
          tone: 'danger',
          confirmLabel: 'Delete',
        })
      }
    >
      Delete project
    </button>
  )
}

'use client'
import { DialogLayout, openDialog } from 'react-confirm-alert'

export function FeedbackForm() {
  return (
    <button
      onClick={() =>
        openDialog({
          render: ({ close, dismiss }) => (
            <form onSubmit={(e) => { e.preventDefault(); close() }}>
              <DialogLayout
                title="Send feedback"
                actions={[
                  { label: 'Cancel', onClick: dismiss },
                  { label: 'Send', variant: 'primary', type: 'submit' },
                ]}
              >
                <label htmlFor="topic">Topic</label>
                <select id="topic">
                  <option>Bug</option>
                  <option>Idea</option>
                  <option>Question</option>
                </select>
                <label htmlFor="details">Details</label>
                <textarea id="details" data-autofocus required />
                <label>
                  <input type="checkbox" defaultChecked />{' '}
                  You can email me about this
                </label>
              </DialogLayout>
            </form>
          ),
        })
      }
    >
      Send feedback
    </button>
  )
}

'use client'
import { confirm } from 'react-confirm-alert'

export const classNames = {
  // open:grid, not grid: a display class would also show the dialog
  // while it is closed.
  dialog: `fixed inset-0 m-0 size-full max-h-none max-w-none open:grid
    place-items-center bg-transparent p-4 backdrop:bg-black/40`,
  panel: 'w-full max-w-sm rounded-2xl bg-white p-6 shadow-2xl',
  title: 'text-lg font-semibold text-zinc-950',
  message: 'mt-1 text-sm text-zinc-500',
  actions: 'mt-6 flex justify-end gap-2',
  button: `rounded-lg px-4 py-2 text-sm font-medium text-zinc-700
    data-[variant=primary]:bg-emerald-600
    data-[variant=primary]:text-white`,
}

export function TailwindOnly() {
  return (
    <button
      onClick={() =>
        confirm({
          title: 'Invite 3 people?',
          message: 'They get an email with a link to join.',
          confirmLabel: 'Send invites',
          unstyled: true,
          classNames,
        })
      }
    >
      Invite
    </button>
  )
}