76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import * as Dialog from '@radix-ui/react-dialog'
|
|
import { AlertTriangle, X } from 'lucide-react'
|
|
|
|
import './ConfirmDangerDialog.scss'
|
|
|
|
type ConfirmDangerDialogProps = {
|
|
open: boolean
|
|
title: string
|
|
description: string
|
|
confirmText?: string
|
|
cancelText?: string
|
|
isLoading?: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
onConfirm: () => void
|
|
}
|
|
|
|
export function ConfirmDangerDialog({
|
|
open,
|
|
title,
|
|
description,
|
|
confirmText = 'Удалить',
|
|
cancelText = 'Отмена',
|
|
isLoading = false,
|
|
onOpenChange,
|
|
onConfirm,
|
|
}: ConfirmDangerDialogProps) {
|
|
return (
|
|
<Dialog.Root open={open} onOpenChange={onOpenChange}>
|
|
<Dialog.Portal>
|
|
<Dialog.Overlay className="confirm-danger-dialog__overlay" />
|
|
|
|
<Dialog.Content className="confirm-danger-dialog">
|
|
<div className="confirm-danger-dialog__header">
|
|
<div className="confirm-danger-dialog__icon">
|
|
<AlertTriangle size={22} />
|
|
</div>
|
|
|
|
<Dialog.Close
|
|
className="confirm-danger-dialog__close"
|
|
type="button"
|
|
>
|
|
<X size={20} />
|
|
</Dialog.Close>
|
|
</div>
|
|
|
|
<Dialog.Title className="confirm-danger-dialog__title">
|
|
{title}
|
|
</Dialog.Title>
|
|
|
|
<Dialog.Description className="confirm-danger-dialog__description">
|
|
{description}
|
|
</Dialog.Description>
|
|
|
|
<div className="confirm-danger-dialog__footer">
|
|
<Dialog.Close
|
|
className="confirm-danger-dialog__cancel"
|
|
type="button"
|
|
disabled={isLoading}
|
|
>
|
|
{cancelText}
|
|
</Dialog.Close>
|
|
|
|
<button
|
|
className="confirm-danger-dialog__confirm"
|
|
type="button"
|
|
disabled={isLoading}
|
|
onClick={onConfirm}
|
|
>
|
|
{isLoading ? 'Удаление...' : confirmText}
|
|
</button>
|
|
</div>
|
|
</Dialog.Content>
|
|
</Dialog.Portal>
|
|
</Dialog.Root>
|
|
)
|
|
} |