From 5edc9cfaf24b22250f272f352c6c8db77e025994 Mon Sep 17 00:00:00 2001
From: Alexander Rudolph <alexr30@web.de>
Date: Wed, 15 Dec 2021 18:00:06 +0100
Subject: [PATCH] Create Modal Layout for the popups
---
client/src/components/StaffModal.tsx | 47 ++++++++++++++++++++++++++++
1 file changed, 47 insertions(+)
create mode 100644 client/src/components/StaffModal.tsx
diff --git a/client/src/components/StaffModal.tsx b/client/src/components/StaffModal.tsx
new file mode 100644
index 0000000..5f1756b
--- /dev/null
+++ b/client/src/components/StaffModal.tsx
@@ -0,0 +1,47 @@
+import { Modal, Button } from "react-bootstrap";
+
+function StaffModal(props: {
+ children?: any;
+ header?: string;
+ hideColor?: string;
+ successColor?: string;
+ onSuccess?: any;
+ onHide?: any;
+ successText?: string;
+ hideText?: string;
+ show: boolean;
+}) {
+ return (
+ <Modal
+ {...props}
+ size="lg"
+ aria-labelledby="contained-modal-title-vcenter"
+ centered
+ >
+ <Modal.Header closeButton>
+ <Modal.Title id="contained-modal-title-vcenter">
+ {props.header}
+ </Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ <div>{props.children}</div>
+ </Modal.Body>
+ <Modal.Footer className="justify-content-between">
+ <Button
+ className="float-left"
+ variant={props.hideColor || "danger"}
+ onClick={props.onHide}
+ >
+ {props.hideText || "Close"}
+ </Button>
+ <Button
+ variant={props.successColor || "primary"}
+ onClick={props.onSuccess}
+ >
+ {props.successText || "Done"}
+ </Button>
+ </Modal.Footer>
+ </Modal>
+ );
+}
+export default StaffModal;
--
GitLab