# FileCard

Die FileCard visualisiert Dateien samt relevanter Informationen.

## Overview

# Playground

Verwende `<FileCard />`, um eine FileCard darzustellen. Diese kann auch als
[FileCardList](/04-components/upload/file-card-list/overview) erweitert werden.

```tsx
import { FileCard } from "@mittwald/flow-react-components";

<FileCard
  type="image/jpg"
  name="image.jpg"
  sizeInBytes={47500}
/>
```

---

# Mit Delete Button

Verwende `delete`, um in der FileCard einen
[Button](/04-components/actions/button/overview) anzuzeigen, mit dem die Datei
unmittelbar entfernt werden kann.

```tsx
import { FileCard } from "@mittwald/flow-react-components";

<FileCard
  type="image/jpg"
  name="image.jpg"
  sizeInBytes={47500}
  onDelete={() => {
    console.log("delete");
  }}
/>
```

---

# Mit Link

Die FileCard ermöglicht es, Dateien über einen `href`-Link zu öffnen, z. B. um
ein Bild in einem neuen Tab anzuzeigen.

```tsx
import { FileCard } from "@mittwald/flow-react-components";

<FileCard
  type="image/jpg"
  name="image.jpg"
  sizeInBytes={47500}
  href="#"
/>
```

---

# Mit ContextMenu

Nutze ein `<ContextMenu />` innerhalb der FileCard, um wichtige Interaktionen in
einem [ContextMenu](/04-components/actions/context-menu/overview) zu platzieren.

```tsx
import {
  ContextMenu,
  FileCard,
  MenuItem,
} from "@mittwald/flow-react-components";

<FileCard
  type="image/jpg"
  name="image.jpg"
  sizeInBytes={47500}
>
  <ContextMenu>
    <MenuItem>Entfernen</MenuItem>
  </ContextMenu>
</FileCard>
```

---

# Mit Bild

Statt eines passenden Icons kann durch `imageSrc` zur Vorschau ein Bild
angezeigt werden.

```tsx
import { FileCard } from "@mittwald/flow-react-components";

<FileCard
  type="image/jpg"
  name="image.jpg"
  sizeInBytes={47500}
  imageSrc="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg"
/>
```

---

# Mit ProgressBar

Nutze eine `<ProgressBar />` innerhalb der FileCard, um beispielsweise einen
Upload Fortschritt anzuzeigen.

```tsx
import {
  FileCard,
  Label,
  ProgressBar,
} from "@mittwald/flow-react-components";

<FileCard>
  <ProgressBar
    value={2.1}
    maxValue={3.4}
    minValue={0}
    showMaxValue
    formatOptions={{ style: "unit", unit: "megabyte" }}
  >
    <Label>Image.png</Label>
  </ProgressBar>
</FileCard>
```

---

# Mit zusätzlichen Buttons

Platziere einen oder mehrere `<Button />` innerhalb der FileCard, um zusätzliche
Optionen anzubieten.

```tsx
import {
  FileCard,
  Button,
  IconChevronDown,
  IconChevronUp,
} from "@mittwald/flow-react-components";

<FileCard
  type="image/jpg"
  name="image.jpg"
  onDelete={() => {
    console.log("delete");
  }}
>
  <Button>
    <IconChevronUp />
  </Button>
  <Button>
    <IconChevronDown />
  </Button>
</FileCard>
```

---

# Mit Failed State

Über das Property `isFailed` kann die FileCard im Failed State angezeigt werden,
um beispielsweise einen fehlgeschlagenen Upload anzuzeigen. Weitere
Informationen können im Subtitle der FileCard angezeigt werden.

```tsx
import {
  FileCard,
  Text,
} from "@mittwald/flow-react-components";

<FileCard name="image.jpg" isFailed>
  <Text>Datei konnte nicht hochgeladen werden</Text>
</FileCard>
```