89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
|
|
interface ConfirmModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
title: string;
|
|
message: ReactNode;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
type?: "danger" | "warning" | "default" | "info";
|
|
confirmVariant?: "danger" | "primary";
|
|
loading?: boolean;
|
|
}
|
|
|
|
export default function ConfirmModal({
|
|
isOpen,
|
|
onClose,
|
|
onConfirm,
|
|
title,
|
|
message,
|
|
confirmText = "Potvrdit",
|
|
cancelText = "Zrušit",
|
|
type = "default",
|
|
confirmVariant,
|
|
loading,
|
|
}: ConfirmModalProps) {
|
|
return (
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<motion.div
|
|
className="admin-modal-overlay"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<div className="admin-modal-backdrop" onClick={onClose} />
|
|
<motion.div
|
|
className="admin-modal admin-confirm-modal"
|
|
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<div className="admin-modal-body admin-confirm-content">
|
|
<div className={`admin-confirm-icon admin-confirm-icon-${type}`}>
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
>
|
|
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
|
|
<line x1="12" y1="9" x2="12" y2="13" />
|
|
<line x1="12" y1="17" x2="12.01" y2="17" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="admin-confirm-title">{title}</h2>
|
|
<p className="admin-confirm-message">{message}</p>
|
|
</div>
|
|
<div className="admin-modal-footer">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="admin-btn admin-btn-secondary"
|
|
disabled={loading}
|
|
>
|
|
{cancelText}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onConfirm}
|
|
className="admin-btn admin-btn-primary"
|
|
disabled={loading}
|
|
>
|
|
{loading ? "Zpracování..." : confirmText}
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|