# FileCardList

Die FileCardList platziert mehrere FileCards in einem ColumnLayout.

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

<FileCardList aria-label="Hochgeladene Dateien">
  <FileCard
    name="file1.txt"
    onDelete={() => {
      console.log("delete");
    }}
  />
  <FileCard
    name="file2.txt"
    onDelete={() => {
      console.log("delete");
    }}
  />
  <FileCard
    name="file3.txt"
    onDelete={() => {
      console.log("delete");
    }}
  />
  <FileCard
    name="file4.txt"
    onDelete={() => {
      console.log("delete");
    }}
  />
  <FileCard
    type="image/jpg"
    name="image.jpg"
    onDelete={() => {
      console.log("delete");
    }}
  />
</FileCardList>
```

---

# Best Practices

- Zeige hochgeladene Dateien sofort an. Das gibt dem User eine direkte
  Rückmeldung.
- Gib der Liste ein aussagekräftiges `aria-label`.

---

# Kombiniere mit ...

## FileDropZone

Stelle mit der FileCardList die Dateien dar, die über eine
[FileDropZone](https://flow.mittwald.de/04-components/upload/file-drop-zone) hochgeladen wurden.

```tsx
import {
  Button,
  FileCard,
  FileCardList,
  FileDropZone,
  FileField,
  Heading,
  IconUpload,
  Section,
} from "@mittwald/flow-react-components";
import { useState } from "react";

export default () => {
  const [files, setFiles] = useState<File[]>([]);

  return (
    <Section>
      <FileDropZone
        multiple
        onChange={(value) => {
          if (value) {
            setFiles([...files, ...value]);
          }
        }}
      >
        <IconUpload />
        <Heading>Dateien ablegen</Heading>
        <FileField>
          <Button>Dateien auswählen</Button>
        </FileField>
      </FileDropZone>

      <FileCardList>
        {files.map((file) => (
          <FileCard
            name={file.name}
            type={file.type}
            key={file.name}
            sizeInBytes={file.size}
            onDelete={() =>
              setFiles(
                files.filter((watched) => watched !== file),
              )
            }
          />
        ))}
      </FileCardList>
    </Section>
  );
}
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | - |
| `columnGap` | `GapSize` | - | Size of the column gap between the content blocks inside the column layout. |
| `gap` | `GapSize` | `"m"` | Size of the row and column gap between the content blocks inside the column layout. |
| `l` | `(number)[]` | - | Column layout for container size l. |
| `m` | `(number)[]` | - | Column layout for container size m. |
| `rowGap` | `GapSize` | - | Size of the row gap between the content blocks inside the column layout. |
| `s` | `(number)[]` | - | Column layout for container size s. |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-describedby` | `string` | - | Identifies the element (or elements) that describes the object. @see aria-labelledby |
| `aria-hidden` | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
| `aria-label` | `string` | - | Defines a string value that labels the current element. @see aria-labelledby. |
| `aria-labelledby` | `string` | - | Identifies the element (or elements) that labels the current element. @see aria-describedby. |