ci4sManagement-cloud/react-ui/src/components/BasicTableInfo/index.tsx

import classNames from 'classnames';
import { BasicInfoItem, type BasicInfoData, type BasicInfoLink } from '../BasicInfo';
import './index.less';
export type { BasicInfoData, BasicInfoLink };

type BasicTableInfoProps = {
  datas: BasicInfoData[];
  className?: string;
  style?: React.CSSProperties;
  labelWidth: number;
};

export default function BasicTableInfo({
  datas,
  className,
  style,
  labelWidth,
}: BasicTableInfoProps) {
  const remainder = datas.length % 4;
  const array = [];
  if (remainder > 0) {
    for (let i = 0; i < 4 - remainder; i++) {
      array.push({
        label: '',
        value: '',
      });
    }
  }
  const showDatas = [...datas, ...array];

  return (
    <div className={classNames('kf-basic-table-info', className)} style={style}>
      {showDatas.map((item) => (
        <BasicInfoItem
          key={item.label}
          data={item}
          labelWidth={labelWidth}
          classPrefix="kf-basic-table-info"
        />
      ))}
    </div>
  );
}