move to git.n39.euall books in the bag ...

frontend/src/shared/components/modals/ModalHeader.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Button, Modal } from "react-bootstrap";
+import { AiOutlineClose } from "react-icons/ai";
+import { primary, secondary } from "../../../colors";
+
+export const ModalHeader = ({
+  title,
+  icon,
+  onClose,
+}: {
+  onClose: () => void;
+  title: JSX.Element | string;
+  icon?: JSX.Element;
+}): React.JSX.Element => {
+  return (
+    <Modal.Header
+      style={{
+        border: "2px solid black",
+        borderBottom: "none",
+        backgroundColor: primary,
+      }}
+    >
+      <Modal.Title className='w-100 d-flex' style={{ height: "fit-content" }}>
+        {typeof title === "string" ? (
+          <>
+            {icon}
+            <h2 className='m-auto p-2' style={{ textAlign: "center" }}>
+              {title}
+            </h2>
+          </>
+        ) : (
+          title
+        )}
+        <Button
+          className='ml-auto mr-0'
+          style={{
+            backgroundColor: secondary,
+            color: "black",
+            border: "2px solid black",
+            width: "fit-content",
+            height: "fit-content",
+          }}
+          onClick={onClose}
+        >
+          <AiOutlineClose />
+        </Button>
+      </Modal.Title>
+    </Modal.Header>
+  );
+};