sbt-idp/cope2n-fe/src/pages/reviews/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',
        width: '200px',
        backgroundColor: isSelected ? '#d4ecff' : '#fff',
        padding: '4px 8px',
        marginRight: '4px',
        marginTop: '2px',
        position: 'relative',
        height: '100px',
        overflow: 'hidden',
      }}
      onClick={onClick}
    >
      <div>
        <span
          style={{
            fontSize: '12px',
            color: '#333',
            fontWeight: 'bold',
            padding: '4px 8px',
            cursor: 'default',
          }}
        >
          {file['Doc Type'].toUpperCase()}
        </span>
        <br/>
        <span
          style={{
            fontSize: '12px',
            color: '#aaa',
            fontWeight: 'bold',
            padding: '4px 8px',
            cursor: 'default',
            maxWidth: '50px',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
          }}
        >
          {fileName ? fileName.substring(0, 25).replace('temp_', '') : fileName}
        </span>
      </div>
      <div
        style={{
          padding: '4px',
          position: 'absolute',
          bottom: 2,
          right: 2,
        }}
      >
        <Button
          style={{
            margin: '4px 2px',
          }}
          onClick={() => {
            setIsReasonModalOpen(true);
          }}
        >
          Review
        </Button>
        <Button
          style={{
            margin: '4px 2px',
          }}
          onClick={() => {
            const downloadUrl = file['File URL'];
            window.open(downloadUrl, '_blank');
          }}
        >
          <DownloadOutlined />
        </Button>
      </div>
    </div>
  );
};

export default FileCard;