Syed Waseem
48dbbdfcbb
- Updated icon imports in dashboard, policy engine, and custom components to use phosphor-icons. - Replaced icons such as Check, Plus, Trash2, and others with their phosphor equivalents. - Ensured consistent icon usage across the application for better visual coherence.
75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import CustomModal from "./CustomModal";
|
|
import CustomButton from "./CustomButton";
|
|
import { WarningIcon, CheckCircleIcon } from "@phosphor-icons/react";
|
|
|
|
interface ConfirmationModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
title: string;
|
|
description: string;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
variant?: "danger" | "primary" | "warning" | "success"; // To style the confirm button
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
onConfirm,
|
|
title,
|
|
description,
|
|
confirmText = "Confirm",
|
|
cancelText = "Cancel",
|
|
variant = "danger",
|
|
isLoading = false,
|
|
}) => {
|
|
return (
|
|
<CustomModal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title={title}
|
|
size="sm"
|
|
showCloseButton={false}
|
|
>
|
|
<div className="flex flex-col items-center text-center">
|
|
<div className={`p-3 rounded-full mb-4 ${variant === 'danger' ? 'bg-[#0B3B6A]/10 text-[#0B3B6A]' :
|
|
variant === 'warning' ? 'bg-amber-50 text-amber-600' :
|
|
variant === 'success' ? 'bg-emerald-50 text-emerald-600' :
|
|
'bg-blue-50 text-blue-600'
|
|
}`}>
|
|
{variant === 'success' ? <CheckCircleIcon size={32} /> : <WarningIcon size={32} />}
|
|
</div>
|
|
|
|
<p className="text-gray-500 mb-6 font-medium">
|
|
{description}
|
|
</p>
|
|
|
|
<div className="flex gap-3 w-full">
|
|
<CustomButton
|
|
variant="outlined"
|
|
onClick={onClose}
|
|
disabled={isLoading}
|
|
className="flex-1"
|
|
>
|
|
{cancelText}
|
|
</CustomButton>
|
|
<CustomButton
|
|
variant={variant === 'danger' ? 'primary' : 'primary'} // CustomButton usually has 'primary' or 'outlined'. We might need to handle color via other props if needed, but 'primary' (red in this app) is usually danger.
|
|
onClick={onConfirm}
|
|
loading={isLoading}
|
|
disabled={isLoading}
|
|
className="flex-1"
|
|
>
|
|
{confirmText}
|
|
</CustomButton>
|
|
</div>
|
|
</div>
|
|
</CustomModal>
|
|
);
|
|
};
|
|
|
|
export default ConfirmationModal;
|