FileCard

This component is used to display a condensed view of a file. When clicked, the user should expect to see a detailed version.

Basic usage

The mimeType prop displays the icon corresponding to the file's MIME type. It displays an unknown icon if the prop or the MIME type is not found.

<>
  <FileCard
    title="Filename.pdf"
    description="Uploaded on November 4, 2020"
    mimeType="application/pdf"
    onClick={() => {}}
  />
  <FileCard
    title="Filename.pdf"
    description="Uploaded on November 4, 2020"
    mimeType="image/png"
    onClick={() => {}}
  />
  <FileCard
    title="Filename.pdf"
    description="Uploaded on November 4, 2020"
    onClick={() => {}}
  />
</>

Delete

The onDelete prop lets you define an action to execute when the delete icon appears. The icon will only appear if the prop is present.

<FileCard onDelete={onDeleteFile} {...otherProps} />

Highlighted

The isHighlighted prop lets you specify whether the FileCard component should be highlighted.

<FileCard isHighlighted {...otherProps} />