initial commit

client/src/ErrorModal/ErrorModal.css

@@ -0,0 +1,8 @@
+.error-modal {
+  color: rgb(174, 0, 0);
+  backdrop-filter: blur(10px);
+}
+
+.error-content {
+  background-color: rgba(255, 201, 201, 0.8);
+}

client/src/ErrorModal/ErrorModal.tsx

@@ -0,0 +1,31 @@
+import Modal from "react-bootstrap/Modal";
+import "./ErrorModal.css";
+
+interface ErrorModalProps {
+  error: string;
+  entity: string;
+  show: boolean;
+}
+
+function ErrorModal(props: ErrorModalProps) {
+  return (
+    <Modal
+      {...props}
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+      className="error-modal"
+    >
+      <Modal.Header className="error-content">
+        <Modal.Title id="contained-modal-title-vcenter">API Error</Modal.Title>
+      </Modal.Header>
+      <Modal.Body className="error-content">
+        <p>{props.error}</p>
+        <p>error occurred while fetching {props.entity}</p>
+        <p>Try again later or contact the site administrator</p>
+      </Modal.Body>
+    </Modal>
+  );
+}
+
+export default ErrorModal;