79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import React from "react";
|
|
import { InfoIcon } from "../../icons/ShortcutIcons";
|
|
import { SaveDiskIcon } from "../../icons/ExportCommonIcons";
|
|
import { useCompareStore } from "../../../store/builder/store";
|
|
import OuterClick from "../../../utils/outerClick";
|
|
|
|
interface ComparePopUpProps {
|
|
onClose: () => void;
|
|
}
|
|
|
|
const ComparePopUp: React.FC<ComparePopUpProps> = ({ onClose }) => {
|
|
const { setComparePopUp } = useCompareStore();
|
|
|
|
OuterClick({
|
|
contextClassName: ["compare-wrapper", "input"],
|
|
setMenuVisible: () => setComparePopUp(false),
|
|
});
|
|
|
|
return (
|
|
<div className="compare-container">
|
|
<div className="compare-wrapper">
|
|
<div className="grid-wrapper">
|
|
<div className="header">
|
|
Do you want to save this version before comparing?
|
|
</div>
|
|
|
|
<div className="cards-container">
|
|
<div className="card"></div>
|
|
<div className="card"></div>
|
|
|
|
<div className="card-layout-wrapper">
|
|
<div className="card-layout-container">
|
|
<div className="tab-header">
|
|
<div className="label-tab">Layout !</div>
|
|
<div className="status"></div>
|
|
</div>
|
|
<div className="icon">
|
|
<SaveDiskIcon />
|
|
</div>
|
|
<div className="skeleton-wrapper">
|
|
<div className="skeleton"></div>
|
|
<div className="skeleton"></div>
|
|
<div className="skeleton"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card"></div>
|
|
<div className="card"></div>
|
|
</div>
|
|
|
|
<div className="button-wrapper">
|
|
<div className="button-group">
|
|
<button className="save btn" onClick={onClose}>
|
|
Save & Continue
|
|
</button>
|
|
<div className="replace btn">Replace Existing Version</div>
|
|
</div>
|
|
<button
|
|
className="cancel btn"
|
|
id="compare-cancel-btn"
|
|
onClick={() => setComparePopUp(false)}
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="footer">
|
|
<InfoIcon /> Save this version and proceed.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ComparePopUp;
|