Dialog

import { FormEvent, useState } from 'react';
import { Button, Dialog } from '@peppermint-design/devreadykit-custom';

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open dialog</Button>

      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        title="Enable notifications?"
        description="We'll send product updates and tips every couple of weeks."
        primary={{ label: 'Enable', onClick: () => setOpen(false) }}
        secondary={{ label: 'Not now', onClick: () => setOpen(false) }}
      >
        <p>
          You can change this setting in your account preferences at any time.
          We only send a handful of emails each month.
        </p>
      </Dialog>
    </>
  );
}

import { useState } from 'react';
import { Button, Dialog } from '@peppermint-design/devreadykit-custom';

export default function ConfirmationExample() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button color="error" onClick={() => setOpen(true)}>
        Delete file
      </Button>

      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        title="Delete “Quarterly_Report.pdf”?"
        description="This action cannot be undone."
        primary={{ label: 'Delete', color: 'error', onClick: () => setOpen(false) }}
        secondary={{ label: 'Cancel', onClick: () => setOpen(false) }}
        size="md"
      >
        <p>If you still need this document, download a copy before deleting it.</p>
      </Dialog>
    </>
  );
}

import { useState } from 'react';
import { Button, Dialog } from '@peppermint-design/devreadykit-custom';

export default function FormDialog() {
  const [open, setOpen] = useState(false);
  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log('Created user', formData);
    setFormData({ name: '', email: '' });
    setOpen(false);
  };

  return (
    <>
      <Button onClick={() => setOpen(true)}>Create user</Button>

      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        title="Create new user"
        description="Fill in the details below to add a teammate."
        footer={
          <div className="flex flex-col gap-200 sm:flex-row sm:justify-end">
            <Button variant="filled" color="secondary" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button type="submit" form="dialog-user-form">
              Create user
            </Button>
          </div>
        }
      >
        <form id="dialog-user-form" onSubmit={handleSubmit} className="space-y-4">
          <label className="flex flex-col gap-1 text-sm text-neutral-40">
            Name
            <input
              className="rounded-lg border border-neutral-90 px-3 py-2 outline-none focus:border-primary-50"
              value={formData.name}
              onChange={(event) => setFormData((prev) => ({ ...prev, name: event.target.value }))}
              required
            />
          </label>
          <label className="flex flex-col gap-1 text-sm text-neutral-40">
            Email
            <input
              type="email"
              className="rounded-lg border border-neutral-90 px-3 py-2 outline-none focus:border-primary-50"
              value={formData.email}
              onChange={(event) => setFormData((prev) => ({ ...prev, email: event.target.value }))}
              required
            />
          </label>
        </form>
      </Dialog>
    </>
  );
}

import { useState } from 'react';
import { Button, Dialog } from '@peppermint-design/devreadykit-custom';

export default function DeleteConfirmationExample() {
  const [open, setOpen] = useState(false);
  const file = { id: 'file-17', name: 'Brand_Guidelines.fig' };

  return (
    <>
      <Button color="error" onClick={() => setOpen(true)}>
        Delete “{file.name}”
      </Button>

      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        title={`Delete ${file.name}?`}
        description="This action cannot be undone."
        primary={{ label: 'Delete', color: 'error', onClick: () => setOpen(false) }}
        secondary={{ label: 'Cancel', onClick: () => setOpen(false) }}
        size="sm"
      >
        <p className="text-neutral-40">
          Make sure no one on your team still needs this file. Once deleted, you'll
          need to re-upload it manually.
        </p>
      </Dialog>
    </>
  );
}

import { useState } from 'react';
import { Button, Dialog } from '@peppermint-design/devreadykit-custom';

const image = {
  url: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee',
  alt: 'Sunset over mountains',
};

export default function ImagePreview() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="border" onClick={() => setOpen(true)}>
        Preview image
      </Button>

      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        title="Image preview"
        description="Click outside or press Escape to close."
        size="lg"
        hideCloseButton
        footer={
          <div className="flex justify-end">
            <Button onClick={() => setOpen(false)}>Close</Button>
          </div>
        }
      >
        <img
          src={`${image.url}?auto=format&fit=crop&w=960&q=80`}
          alt={image.alt}
          className="max-h-[480px] w-full rounded-lg object-cover"
        />
      </Dialog>
    </>
  );
}