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

import { DownloadOutlined } 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',
          }}
        >
          {isRequired ? (
            <>
              {isReviewd ? (
                <Tag
                  color={'success'}
                  style={{
                    display: 'inline-block',
                    fontWeight: 'bold',
                    textTransform: 'capitalize',
                  }}
                >
                  Reviewd
                </Tag>
              ) : (
                <Tag
                  color={'warning'}
                  style={{
                    display: 'inline-block',
                    fontWeight: 'bold',
                    textTransform: 'capitalize',
                  }}
                >
                  Not reviewed
                </Tag>
              )}
            </>
          ) : (
            <Tag
              style={{
                display: 'inline-block',
                fontWeight: 'bold',
                textTransform: 'capitalize',
              }}
              // bordered={false}
            >
              Not required
            </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;