Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 8x 17x 25x 25x 25x 25x | // Constants
import { ACTION_MENU_LABELS } from '@/constants';
// Types
import { BaseVariant } from '@/types';
// Utils
import { combineClasses } from '@shared/utils';
// Components
import { LoadingIcon, TrashIcon } from '../icons/reacts';
// Styles
import './styles/confirm-delete-dialog.css';
const variantTheme = {
[BaseVariant.PRIMARY]: {
root: 'confirm-delete-dialog-root',
iconWrapper: 'confirm-delete-dialog-icon-wrapper',
title: 'confirm-delete-dialog-title',
content: 'confirm-delete-dialog-content',
actions: 'confirm-delete-dialog-actions',
cancelButton: 'confirm-delete-dialog-cancel-button',
deleteButton: 'confirm-delete-dialog-delete-button',
deleteButtonLoading: 'confirm-delete-dialog-delete-button-loading',
},
};
export interface ConfirmDeleteDialogProps {
title: string;
content: string;
onCancel?: () => void;
onDelete?: () => void;
isLoading?: boolean;
className?: string;
variant?: BaseVariant;
}
export const ConfirmDeleteDialog = ({
title,
content,
onCancel,
onDelete,
isLoading = false,
className = '',
variant = BaseVariant.PRIMARY,
}: ConfirmDeleteDialogProps) => {
const theme = variantTheme[variant];
return (
<div
data-variant={variant}
className={combineClasses(theme.root, className)}
>
<div className={theme.iconWrapper}>
<TrashIcon />
</div>
<h2 className={theme.title}>{title}</h2>
<p className={theme.content}>{content}</p>
<div className={theme.actions}>
<button
type="button"
aria-label="Cancel"
onClick={onCancel}
className={theme.cancelButton}
>
{ACTION_MENU_LABELS.cancel}
</button>
<button
type="button"
aria-label="Delete"
onClick={onDelete}
disabled={isLoading}
className={combineClasses(
theme.deleteButton,
isLoading && theme.deleteButtonLoading,
)}
>
{isLoading ? (
<LoadingIcon className="size-4" />
) : (
ACTION_MENU_LABELS.delete
)}
</button>
</div>
</div>
);
};
|