oranguru/src/Former/FormerButtonArea.tsx

import { Button, Group, Tooltip } from '@mantine/core';
import { IconDeviceFloppy, IconX } from '@tabler/icons-react';

import { useFormerStore } from './Former.store';

export const FormerButtonArea = () => {
  const {
    buttonAreaGroupProps,
    closeButtonProps,
    closeButtonTitle,
    dirty,
    onClose,
    request,
    save,
    saveButtonProps,
    saveButtonTitle,
  } = useFormerStore((state) => ({
    buttonAreaGroupProps: state.layout?.buttonAreaGroupProps,
    closeButtonProps: state.layout?.closeButtonProps,
    closeButtonTitle: state.layout?.closeButtonTitle,
    dirty: state.dirty,
    onClose: state.onClose,
    request: state.request,
    save: state.save,
    saveButtonProps: state.layout?.saveButtonProps,
    saveButtonTitle: state.layout?.saveButtonTitle,
  }));

  const disabledSave =
    ['select', 'view'].includes(request || '') || (['update'].includes(request || '') && !dirty);

  return (
    <Group
      justify="center"
      p="xs"
      style={{ boxShadow: '2px 2px 5px rgba(47, 47, 47, 0.1)' }}
      w="100%"
      {...buttonAreaGroupProps}
    >
      <Group grow justify="space-evenly">
        {typeof onClose === 'function' && (
          <Button
            color="orange"
            leftSection={<IconX />}
            miw={'8rem'}
            px="md"
            size="sm"
            {...closeButtonProps}
            onClick={() => {
              onClose();
            }}
          >
            {closeButtonTitle || 'Close'}
          </Button>
        )}
        <Tooltip
          label={
            disabledSave ? (
              <p>
                Cannot save in view or select mode, or no changes made. <br />
                Try changing some values.
              </p>
            ) : (
              <p>Save the current record</p>
            )
          }
        >
          <Button
            bg={request === 'delete' ? 'red' : undefined}
            color="green"
            leftSection={<IconDeviceFloppy />}
            miw={'8rem'}
            px="md"
            size="sm"
            {...saveButtonProps}
            disabled={disabledSave}
            onClick={() => save()}
          >
            {saveButtonTitle || 'Save'}
          </Button>
        </Tooltip>
      </Group>
    </Group>
  );
};