init + api use

src/components/ConfirmDialog.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import {
+  DialogRoot,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogBody,
+  DialogFooter,
+  DialogActionTrigger,
+} from '@chakra-ui/react'
+import { Button } from '@chakra-ui/react'
+
+interface ConfirmDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  onConfirm: () => void
+  title: string
+  message: string
+  confirmLabel?: string
+  cancelLabel?: string
+  isLoading?: boolean
+}
+
+export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmLabel = 'Подтвердить',
+  cancelLabel = 'Отмена',
+  isLoading = false,
+}) => {
+  return (
+    <DialogRoot open={isOpen} onOpenChange={(e) => !e.open && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <DialogBody>
+          {message}
+        </DialogBody>
+        <DialogFooter>
+          <DialogActionTrigger asChild>
+            <Button variant="outline" onClick={onClose} disabled={isLoading}>
+              {cancelLabel}
+            </Button>
+          </DialogActionTrigger>
+          <Button
+            colorPalette="red"
+            onClick={onConfirm}
+            loading={isLoading}
+          >
+            {confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </DialogRoot>
+  )
+}
+