asb_cloud_front/src/components/SmboPlate.jsx

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

import {useState} from "react";

export const SquareIndicator = ({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>)
}

const platesData = [
  {id: '1', title: 'equipToolName', placeHolderId: '', state: '', units: 'ч', value: SquareIndicator, captionValue: 'Подпись', custom: 'Я не понял про это'}
]

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


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

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

  const plates_smbo_equip = platesData.map((items) => (
    <div className="plate_container" onClick={openModal}>
      <div className="plate_title">{title}</div>
      <div className="plate_state"><SquareIndicator state={state}/></div>

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

  return(<>
    {plates_smbo_equip}

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