# `PhiaUi.Components.FileCard`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/cards/file_card.ex#L1)

File attachment card with type-based icon and color coding.

Displays a file's name, size, upload date, and a type-specific icon.
Supports two layout variants: `:default` (icon + stacked info) and
`:compact` (single row, suitable for lists or tables).
File type is automatically detected from the file extension.

## Supported file types and icon colors

| Extension(s)                | Detected type | Icon colour  |
|-----------------------------|---------------|--------------|
| `.pdf`                      | `:pdf`        | Red          |
| `.doc`, `.docx`             | `:doc`        | Blue         |
| `.xls`, `.xlsx`             | `:xls`        | Emerald      |
| `.ppt`, `.pptx`             | `:ppt`        | Orange       |
| `.jpg`, `.jpeg`, `.png`, `.gif`, `.webp` | `:image` | Violet |
| `.zip`, `.rar`, `.tar`, `.gz` | `:archive` | Yellow       |
| `.mp3`, `.wav`, `.mp4`, `.mov` | `:media`  | Pink         |
| Anything else               | `:default`    | Muted        |

## Layout variants

- `:default` — icon block on the left, filename + extension badge on top,
  size and date below. Actions slot wraps below the info block.
- `:compact` — single row: icon (smaller, 36×36) + filename + size/date
  inline. Actions slot stays in the row.

## Examples

    <%!-- PDF attachment in default layout --%>
    <.file_card filename="report-q1.pdf" size="2.4 MB" uploaded_at="Mar 6, 2026">
      <:actions>
        <.button size={:sm} variant={:outline} href="/files/report-q1.pdf" download>
          Download
        </.button>
      </:actions>
    </.file_card>

    <%!-- Compact list row --%>
    <.file_card filename="presentation.pptx" size="8.1 MB" variant={:compact} />

    <%!-- File list from assigns --%>
    <div class="space-y-2">
      <.file_card
        :for={file <- @attachments}
        filename={file.name}
        size={file.human_size}
        uploaded_at={file.inserted_at_label}
        href={file.download_url}
      />
    </div>

# `file_card`

Renders a file attachment card.

The card layout contains:
- A colored icon block (auto-detected from `filename` extension).
- The `filename` with a monospace extension badge (e.g. "PDF", "XLSX").
- Optional `size` and `uploaded_at` metadata labels.
- An optional `:actions` slot for download, delete, or share buttons.

When `href` is set, the filename renders as a download link. When no
`href` is provided, the filename is a plain `<span>`.

## Examples

    <%!-- PDF attachment --%>
    <.file_card filename="invoice.pdf" size="1.2 MB" uploaded_at="Mar 6, 2026">
      <:actions>
        <.button size={:sm} variant={:outline}>Download</.button>
      </:actions>
    </.file_card>

    <%!-- Compact single-row layout --%>
    <.file_card filename="data.xlsx" size="512 KB" variant={:compact} />

    <%!-- With download link --%>
    <.file_card
      filename="contract.docx"
      size="320 KB"
      href="/downloads/contract.docx"
      uploaded_at="2 days ago"
    />

## Attributes

* `filename` (`:string`) (required) - File name including extension.
* `size` (`:string`) - Human-readable file size (e.g. '2.4 MB'). Defaults to `nil`.
* `uploaded_at` (`:string`) - Upload date/time label. Defaults to `nil`.
* `href` (`:string`) - Download link for the file. Defaults to `nil`.
* `variant` (`:atom`) - Layout variant: :default (stacked) or :compact (single row). Defaults to `:default`. Must be one of `:default`, or `:compact`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the card element.
## Slots

* `actions` - Action buttons (download, delete, share, etc.).

---

*Consult [api-reference.md](api-reference.md) for complete listing*