@restnfeel/agentc-starter-kit/dist/esm/components/ui/confirmation-dialog.js

한국어 기업용 CMS 모듈 - Task Master AI와 함께 빠르게 웹사이트를 구현할 수 있는 재사용 가능한 컴포넌트 시스템

import { jsx, jsxs } from 'react/jsx-runtime';
import React from 'react';
import { Modal, ModalContent, ModalHeader, ModalTitle } from './Modal.js';
import { Button } from './Button.js';

function ConfirmationDialog({ open, onOpenChange, title, description, confirmText = "확인", cancelText = "취소", variant = "default", onConfirm, onCancel, loading = false, }) {
    const handleConfirm = () => {
        onConfirm();
    };
    const handleCancel = () => {
        if (onCancel) {
            onCancel();
        }
        else {
            onOpenChange(false);
        }
    };
    const getVariantStyles = () => {
        switch (variant) {
            case "destructive":
                return {
                    titleColor: "text-red-600",
                    descriptionColor: "text-red-800",
                    confirmButton: "bg-red-600 hover:bg-red-700 text-white",
                    icon: "⚠️",
                };
            case "warning":
                return {
                    titleColor: "text-orange-600",
                    descriptionColor: "text-orange-800",
                    confirmButton: "bg-orange-600 hover:bg-orange-700 text-white",
                    icon: "⚠️",
                };
            default:
                return {
                    titleColor: "text-gray-900",
                    descriptionColor: "text-gray-700",
                    confirmButton: "bg-blue-600 hover:bg-blue-700 text-white",
                    icon: "❓",
                };
        }
    };
    const styles = getVariantStyles();
    return (jsx(Modal, { open: open, onOpenChange: onOpenChange, children: jsxs(ModalContent, { className: "max-w-md", children: [jsx(ModalHeader, { children: jsxs(ModalTitle, { className: `flex items-center gap-2 ${styles.titleColor}`, children: [jsx("span", { className: "text-lg", children: styles.icon }), title] }) }), jsxs("div", { className: "p-6 space-y-4", children: [jsx("p", { className: styles.descriptionColor, children: description }), jsxs("div", { className: "flex gap-3 justify-end", children: [jsx(Button, { variant: "outline", onClick: handleCancel, disabled: loading, children: cancelText }), jsx(Button, { className: styles.confirmButton, onClick: handleConfirm, disabled: loading, children: loading ? "처리중..." : confirmText })] })] })] }) }));
}
// Hook for easier usage
function useConfirmationDialog() {
    const [dialogState, setDialogState] = React.useState({
        open: false,
        title: "",
        description: "",
        onConfirm: () => { },
    });
    const showConfirmation = React.useCallback((options) => {
        setDialogState({
            ...options,
            open: true,
            loading: false,
        });
    }, []);
    const hideConfirmation = React.useCallback(() => {
        setDialogState((prev) => ({ ...prev, open: false }));
    }, []);
    const setLoading = React.useCallback((loading) => {
        setDialogState((prev) => ({ ...prev, loading }));
    }, []);
    const ConfirmationDialogComponent = React.useCallback(() => (jsx(ConfirmationDialog, { ...dialogState, onOpenChange: hideConfirmation })), [dialogState, hideConfirmation]);
    return {
        showConfirmation,
        hideConfirmation,
        setLoading,
        ConfirmationDialog: ConfirmationDialogComponent,
    };
}
// Helper functions for common confirmation patterns
const confirmDelete = (showConfirmation, itemName, onConfirm) => {
    showConfirmation({
        title: "삭제 확인",
        description: `"${itemName}"을(를) 정말 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.`,
        confirmText: "삭제",
        variant: "destructive",
        onConfirm,
    });
};
const confirmAction = (showConfirmation, title, description, onConfirm, confirmText = "확인") => {
    showConfirmation({
        title,
        description,
        confirmText,
        onConfirm,
    });
};

export { ConfirmationDialog, confirmAction, confirmDelete, useConfirmationDialog };
//# sourceMappingURL=confirmation-dialog.js.map