applications/drive/src/app/components/sections/FileBrowser/GridViewItemLink.tsx

   1 import { FileIcon } from '@proton/components';
   2 import { isCompatibleCBZ } from '@proton/shared/lib/helpers/mimetype';
   3 import clsx from '@proton/utils/clsx';
   4
   5 import SignatureIcon from '../../SignatureIcon';
   6 import type { DriveItem } from '../Drive/Drive';
   7 import type { SharedLinkItem } from '../SharedLinks/SharedLinks';
   8 import type { SharedWithMeItem } from '../SharedWithMe/SharedWithMe';
   9 import type { TrashItem } from '../Trash/Trash';
  10 import GridViewItemBase from './GridViewItem';
  11 import { getLinkIconText } from './utils';
  12
  13 export function GridViewItem({ item }: { item: DriveItem | TrashItem | SharedLinkItem | SharedWithMeItem }) {
  14     const iconText = getLinkIconText({
  15         isFile: item.isFile,
  16         mimeType: item.mimeType,
  17         linkName: item.name,
  18     });
  19
  20     const IconComponent = (
  21         <>
  22             {item.cachedThumbnailUrl ? (
  23                 <img
  24                     src={item.cachedThumbnailUrl}
  25                     className={clsx(
  26                         'file-browser-grid-item--thumbnail',
  27                         // TODO: DRVWEB-4404
  28                         // In the future: Music Cover, M4B Audiobook Cover, and other types that are not images that also have covers in their metadata
  29                         isCompatibleCBZ(item.mimeType, item.name) ? 'object-contain' : 'object-cover'
  30                     )}
  31                     alt={iconText}
  32                 />
  33             ) : (
  34                 <FileIcon
  35                     className="file-browser-grid-item--icon"
  36                     size={12}
  37                     mimeType={item.isFile ? item.mimeType : 'Folder'}
  38                     alt={iconText}
  39                 />
  40             )}
  41         </>
  42     );
  43
  44     return (
  45         <GridViewItemBase
  46             IconComponent={IconComponent}
  47             SignatureIconComponent={
  48                 <SignatureIcon
  49                     isFile={item.isFile}
  50                     signatureIssues={item.signatureIssues}
  51                     isAnonymous={!item.activeRevision?.signatureAddress && !item.signatureAddress}
  52                     className="file-browser-grid-view--signature-icon"
  53                 />
  54             }
  55             item={item}
  56         />
  57     );
  58 }