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

import { DownloadOutlined } from '@ant-design/icons';
import { Button } from 'antd';

const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
  const fileName = file['File Name'];

  return (
    <div
      style={{
        border: '1px solid #ccc',
        backgroundColor: isSelected ? '#d4ecff' : '#fff',
        padding: '4px 8px',
        margin: '0 8px 4px',
        cursor: 'pointer',
        display: 'flex',
      }}
      onClick={onClick}
    >
      <div>
        <p
          style={{
            fontSize: '12px',
            color: '#333',
            fontWeight: 'bold',
            cursor: 'default',
            margin: '4px',
          }}
        >
          {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}
        </span>
      </div>
      <Button
        style={{
          margin: '4px 2px',
        }}
        onClick={() => {
          const downloadUrl = file['File URL'];
          window.open(downloadUrl, '_blank');
        }}
      >
        <DownloadOutlined />
      </Button>

    </div>
  );
};

export default FileCard;