CPLv4.0/components/modales/KueModal.jsx

import ReactModal from "react-modal";

function KueModal({ showModal, onClose }) {
  return (
    <ReactModal
      isOpen={showModal}
      onRequestClose={onClose}
      style={{
        overlay: {
          backgroundColor: "rgba(0, 0, 0, 0.5)",
          zIndex: 100,
        },
        content: {
          top: "50%",
          left: "50%",
          right: "auto",
          bottom: "auto",
          marginRight: "-50%",
          transform: "translate(-50%, -50%)",
          width: "90%",
          maxWidth: "800px",
          padding: "0",
        },
      }}
    >
      {/* Modal Header */}
      <div className="flex items-center justify-between bg-blue-500 text-white p-4 rounded-t">
        <h2 className="text-lg font-bold">KUE Einstellung</h2>
        <button onClick={onClose} className="text-white text-lg font-bold">
          &times;
        </button>
      </div>

      {/* Modal Body */}
      <div className="p-6">
        <table className="w-full text-left border-collapse">
          <thead className="bg-gray-100">
            <tr>
              <th className="p-2 border">KÜ</th>
              <th className="p-2 border">Bezeichnung</th>
              <th className="p-2 border">Isolationsgrenzwert</th>
              <th className="p-2 border">Schleifengrenzwert</th>
              <th className="p-2 border">Filterzeit</th>
              <th className="p-2 border">TDR Aktiv</th>
              <th className="p-2 border">KVZ Aktiv</th>
              <th className="p-2 border">Datenlogger</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="p-2 border">1</td>
              <td className="p-2 border">
                <input
                  type="text"
                  className="w-full border rounded p-1"
                  defaultValue="Test1"
                />
              </td>
              <td className="p-2 border">
                <input
                  type="number"
                  className="w-16 border rounded p-1"
                  defaultValue="10.0"
                />{" "}
                MOhm
              </td>
              <td className="p-2 border">
                <input
                  type="number"
                  className="w-16 border rounded p-1"
                  defaultValue="0.10"
                />{" "}
                kOhm
              </td>
              <td className="p-2 border">
                <input
                  type="number"
                  className="w-16 border rounded p-1"
                  defaultValue="420"
                />{" "}
                sek.
              </td>
              <td className="p-2 border text-center">
                <input type="checkbox" defaultChecked />
              </td>
              <td className="p-2 border text-center">
                <input type="checkbox" defaultChecked />
              </td>
              <td className="p-2 border">
                <select className="border rounded p-1">
                  <option value="aus">aus</option>
                  <option value="ein">ein</option>
                </select>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* Modal Footer */}
      <div className="flex justify-end bg-gray-100 p-4 rounded-b">
        <button
          onClick={onClose}
          className="bg-blue-500 text-white p-2 rounded flex items-center"
        >
          <span className="mr-2">💾</span> Speichern
        </button>
      </div>
    </ReactModal>
  );
}

export default KueModal;