Modal für Messkurve auslagern

components/modales/kueModal/ChartModal.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import ReactModal from "react-modal";
+import TDRPopup from "./TDRPopup";
+
+interface ChartModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  chartRef: React.RefObject<HTMLCanvasElement>;
+}
+
+const ChartModal: React.FC<ChartModalProps> = ({
+  isOpen,
+  onClose,
+  chartRef,
+}) => {
+  return (
+    <ReactModal
+      isOpen={isOpen}
+      onRequestClose={onClose}
+      ariaHideApp={false}
+      style={{
+        overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
+        content: {
+          top: "50%",
+          left: "50%",
+          right: "auto",
+          bottom: "auto",
+          marginRight: "-50%",
+          transform: "translate(-50%, -50%)",
+          width: "80%",
+          maxWidth: "50rem",
+          height: "30rem",
+          padding: "1rem",
+          overflow: "hidden",
+        },
+      }}
+    >
+      <button
+        onClick={onClose}
+        style={{
+          position: "absolute",
+          top: "0.625rem",
+          right: "0.625rem",
+          background: "transparent",
+          border: "none",
+          fontSize: "1.5rem",
+          cursor: "pointer",
+        }}
+      >
+        <i className="bi bi-x-circle-fill"></i>
+      </button>
+
+      <div style={{ maxHeight: "100%", overflow: "auto" }}>
+        <TDRPopup />
+      </div>
+
+      <canvas
+        id="myChart"
+        ref={chartRef}
+        style={{ width: "100%", height: "20rem" }}
+      ></canvas>
+    </ReactModal>
+  );
+};
+
+export default ChartModal;