|
|
@@ -1,67 +0,0 @@
|
|
|
-"use client";
|
|
|
-
|
|
|
-
|
|
|
-import { AnimatePresence , motion } from "framer-motion";
|
|
|
-
|
|
|
-export interface ConfirmModalProps {
|
|
|
- isShow: boolean;
|
|
|
- title: string;
|
|
|
- content: string;
|
|
|
- okHandler?: () => void;
|
|
|
- cancelHandler?: () => void;
|
|
|
- noOk?: boolean;
|
|
|
- noCancel?: boolean;
|
|
|
-}
|
|
|
-
|
|
|
-export function ConfirmModal({
|
|
|
- isShow,
|
|
|
- title,
|
|
|
- content,
|
|
|
- okHandler,
|
|
|
- cancelHandler,
|
|
|
- noOk,
|
|
|
- noCancel,
|
|
|
-}: ConfirmModalProps) {
|
|
|
-
|
|
|
- const close = (result: boolean) => {
|
|
|
- if(result) {
|
|
|
- okHandler && okHandler();
|
|
|
- } else {
|
|
|
- cancelHandler && cancelHandler();
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- return (
|
|
|
- <AnimatePresence >
|
|
|
- {isShow &&
|
|
|
- <motion.div
|
|
|
- layout
|
|
|
- initial={{ opacity: 0, }}
|
|
|
- animate={{ opacity: 1 }}
|
|
|
- exit={{ opacity: 0 }}
|
|
|
- className="fixed z-1000 flex justify-center items-center bg-black/50 inset-0"
|
|
|
- onClick={(e) => e.stopPropagation()}
|
|
|
- >
|
|
|
- {/* <div className="fixed z-1000 flex justify-center items-center bg-black/40 inset-0"> */}
|
|
|
- <div className="w-4/5 p-4 bg-white rounded-lg">
|
|
|
- <h3 className="text-center text-ly-18 font-bold mb-6">{title}</h3>
|
|
|
- <p className="text-ly-14 font-medium">{content}</p>
|
|
|
- <div className="w-full flex justify-end gap-3 mt-6">
|
|
|
- {!noOk &&
|
|
|
- <button className="w-20 h-8 flex justify-center items-center rounded-xs bg-ly-green text-ly-12 font-medium text-white"
|
|
|
- onClick={() => close(true)}
|
|
|
- >OK</button>
|
|
|
- }
|
|
|
- {!noCancel &&
|
|
|
- <button className="w-20 h-8 flex justify-center items-center rounded-xs bg-ly-gray text-ly-12 font-medium"
|
|
|
- onClick={() => close(false)}
|
|
|
- >Cancel</button>}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- {/* </div> */}
|
|
|
- </motion.div>
|
|
|
- }
|
|
|
- </AnimatePresence>
|
|
|
- );
|
|
|
-}
|
|
|
-
|