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 }) => {
  const fileName = file['File Name'];
  const extensionType = fileName.split('.').pop();
  const isRequired = file['Is Required'];
  const isReviewd = file['Is Reviewed'];

  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>
        <div style={{display: 'flex', justifyContent: 'space-between', alignItems:'center'}}>
          <Tag
            color={isRequired ? 'warning' : ''}
            style={{ display: 'inline-block', fontWeight: 'bold' , textTransform: 'capitalize' }}
            // bordered={false}
          >
            Required: {isRequired.toString()}
          </Tag>


          <Tag
            color={isReviewd ? 'success' : 'warning'}
            style={{ display: 'inline-block', fontWeight: 'bold', textTransform: 'capitalize' }}
            // bordered={false}
          >
            Reviewed: {isReviewd.toString()}
          </Tag>

        </div>
      </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;