asb_cloud_front/src/components/SmboPlate.jsx

import {Modal} from 'antd'
import '../styles/smbo.css'

import {useState} from "react";

export const SqueareIndicator = ({state}) =>{
  let bgColor = "#AAA"
  switch (state){
    case 1:
      bgColor = "#1B1"
      break;
    case 2:
      bgColor = "#DD1"
      break;
    case 3:
      bgColor = "#D11"
      break;
  }
  return (<svg width="32" height="32" version="1.1" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
    <rect x=".25" y=".25" width="12" height="12"
          fill={bgColor}
          stroke="#ececec" strokeLinejoin="round" strokeWidth=".51"/>
  </svg>)
}

export default function SmboPlate({title, state, operatingTime, units, children}){
  const [isModalVisible, setIsModalVisible] = useState(false)


  const openModal = () => {
    setIsModalVisible(!!children)
  }

  const closeModal = () => {
    setIsModalVisible(false)
  }

  return(<><div className="plate_container" onClick={openModal}>
    <div className="plate_title">{title}</div>
    <div className="plate_state"><SqueareIndicator state={state}/></div>

    <div className="plate_param_title">наработка:</div>
    <div className="plate_param_value">{operatingTime}</div>
    <div className="plate_param_units">{units??'ч'}</div>

  </div>

    <Modal
      title={title}
      centered
      visible={isModalVisible}
      onOk={closeModal}
      onCancel={closeModal}
      width={800}
    >
      <div>
        {children}
      </div>
    </Modal>
  </>)
}