sbt-idp/cope2n-fe/src/pages/reviews2/FileCard.tsx

import {
  CheckCircleOutlined,
  DownloadOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
import { Button, Tag } from 'antd';

const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
  const fileName = file['File Name'];
  const extensionType = fileName.split('.').pop();
  let status = true;
  if (file['Is Required'] && !file['Is Reviewed']) {
    status = false;
  }
  return (
    <div
      style={{
        border: `1px solid #ccc`,
        backgroundColor: isSelected ? '#f4f4f4' : '#fff',
        padding: '4px 8px',
        margin: '0 8px 4px',
        display: 'flex',
        alignItems: 'center',
        cursor: 'pointer',
      }}
      onClick={onClick}
    >
      <div>
        <div>
          <p
            style={{
              fontSize: '12px',
              color: '#333',
              fontWeight: 'bold',
              cursor: 'default',
              margin: '4px 8px 4px 0',
              display: 'inline-block',
            }}
          >
            {file['Doc Type'].toUpperCase()}
          </p>
          <span
            style={{
              fontSize: '12px',
              color: '#aaa',
              fontWeight: 'bold',
              cursor: 'default',
              maxWidth: '40px',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            }}
          >
            {fileName
              ? fileName.substring(0, 25).replace('temp_', '')
              : fileName}
            {' '}({extensionType})
          </span>
        </div>
        <Tag
          color={status ? 'success' : 'warning'}
          icon={
            status ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />
          }
          style={{ display: 'inline-block', fontWeight: 'bold' }}
          // bordered={false}
        >
          {status ? 'Good' : 'Warning'}{' '}
        </Tag>
      </div>
      <Button
        style={{
          width: '24px',
          height: '24px',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          marginLeft: '8px',
        }}
        onClick={() => {
          const downloadUrl = file['File URL'];
          window.open(downloadUrl, '_blank');
        }}
      >
        <DownloadOutlined />
      </Button>
    </div>
  );
};

export default FileCard;