asb_cloud_front/src/pages/LastData.jsx

import {Button, Modal } from "antd";
import {DrillingFluid} from "../components/modalWindows/DrillingFluid";
import {useState} from "react";
import {SludgeDiagram} from "../components/modalWindows/MudDiagram";
import {Nnb} from "../components/modalWindows/Nnb"

export default function LastData(/*{idWell}*/) {

  const [tableVisible, setCementTableVisible] = useState(false)
  const [tableSludgeVisible, setTableSludgeVisible] = useState(false)
  const [tableNNBVisible, setTableNNBVisible] = useState(false)

  return (
    <>
      <div>&nbsp;</div>
      <Button type="primary" onClick={() => setCementTableVisible(true)}>
        Последний замер бурового раствора
      </Button>
      <Modal
        title='Последние показатели бурового раствора'
        centered
        visible={tableVisible}
        onCancel={() => setCementTableVisible(false)}
        width={2000}
        footer={[
          <Button key="back" onClick={() => setCementTableVisible(false)}>
            Закрыть
          </Button>
        ]}
      >
        <DrillingFluid/>
      </Modal>
      <Button type="primary" onClick={() => setTableSludgeVisible(true)} style={{marginLeft: "5px"}}>
        Шламограмма
      </Button>
      <Modal
        title='Шламограмма'
        centered
        visible={tableSludgeVisible}
        onCancel={() => setTableSludgeVisible(false)}
        width={2000}
        footer={[
          <Button key="back" onClick={() => setTableSludgeVisible(false)}>
            Закрыть
          </Button>
        ]}
      >
        <SludgeDiagram/>
      </Modal>
      <Button type="primary" onClick={() => setTableNNBVisible(true)} style={{marginLeft: "5px"}}>
        ННБ
      </Button>
      <Modal
        title='ННБ'
        centered
        visible={tableNNBVisible}
        onCancel={() => setTableNNBVisible(false)}
        width={2000}
        footer={[
          <Button key="back" onClick={() => setTableNNBVisible(false)}>
            Закрыть
          </Button>
        ]}
      >
        <Nnb/>
      </Modal>
    </>)
}