marco.pms.web/src/components/Project/Infrastructure/Floor.jsx

import React from "react";
import WorkArea from "./WorkArea";
const Floor = ({ floor, workAreas, forBuilding }) => {
  return (
    <React.Fragment key={floor.id}>
      {workAreas && workAreas.length > 0 ? (
        workAreas.map((workArea) => (
          <WorkArea
            forBuilding={forBuilding}
            key={workArea.id}
            workArea={workArea}
            floor={floor}
          />
        ))
      ) : (
        <tr>
          <td colSpan="4" className="text-start table-cell">
            <div className="row ps-2">
              {/*         <div className="col-1 col-md-1 d-flex justify-content-between align-items-center " >
                    <button
              className="btn me-2"
            >
            </button>
          
          </div> */}
              <div className="col-12  ps-8">
                <div className="row">
                  <div className="d-flex col-5">
                    {" "}
                    <span className="fw-semibold text-primary">
                      Floor:&nbsp;
                    </span>{" "}
                    <span className="fw-normal text-darkgreen">
                      {floor.floorName}
                    </span>
                  </div>
                  <div className="text-start col-5">
                    {" "}
                    <span className="fw-semibold text-primary">
                      Work Area:&nbsp;
                    </span>{" "}
                    <span className="fw-normal text-danger">Not Available</span>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      )}
    </React.Fragment>
  );
};
export default Floor;