Alert Component

This component provides alert functionality, displaying important messages to the user.

Props

• prop1: Description of prop1.
• prop2: Description of prop2.

Usage

import { Alert } from 'mycrumbs-uikit';

const props = {};

<Alert prop1="value1" prop2="value2" />;

import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
import type { FC, ReactNode } from 'react';
import { Fragment } from 'react';

import { Button } from './Button';

interface AlertProps {
  title: ReactNode;
  description: ReactNode;
  show: boolean;
  isDestructive?: boolean;
  isPerformingAction?: boolean;
  confirmText?: string;
  children?: ReactNode;
  onConfirm?: () => void;
  onClose: () => void;
}

export const Alert: FC<AlertProps> = ({
  title,
  description,
  show,
  isDestructive = false,
  isPerformingAction = false,
  confirmText,
  children,
  onConfirm,
  onClose
}) => {
  return (
    <Transition show={show} as={Fragment}>
      <Dialog
        as="div"
        className="fixed inset-0 z-10 overflow-y-auto"
        onClose={() => onClose?.()}
      >
        <div className="flex min-h-screen items-center justify-center p-4 text-center sm:block sm:p-0">
          <TransitionChild
            as={Fragment}
            enter="ease-out duration-100"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <DialogPanel className="fixed inset-0 bg-gray-500/75 transition-opacity dark:bg-gray-900/80" />
          </TransitionChild>
          <span
            className="hidden sm:inline-block sm:h-screen sm:align-middle"
            aria-hidden="true"
          />
          <TransitionChild
            as={Fragment}
            enter="ease-out duration-100"
            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            enterTo="opacity-100 translate-y-0 sm:scale-100"
            leave="ease-in duration-100"
            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
          >
            <div className="inline-block w-full scale-100 space-y-6 rounded-xl bg-white p-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800 sm:max-w-sm sm:align-middle">
              <div className="space-y-2">
                <b className="text-xl">{title}</b>
                <p>{description}</p>
              </div>
              <div>{children}</div>
              <div className="space-y-3">
                {onConfirm ? (
                  <Button
                    className="w-full"
                    size="lg"
                    variant={isDestructive ? 'danger' : 'primary'}
                    disabled={isPerformingAction}
                    onClick={() => onConfirm()}
                  >
                    {confirmText}
                  </Button>
                ) : null}
                <Button
                  className="w-full"
                  size="lg"
                  variant="secondary"
                  outline
                  onClick={onClose}
                >
                  Cancel
                </Button>
              </div>
            </div>
          </TransitionChild>
        </div>
      </Dialog>
    </Transition>
  );
};