# Backup List

> Admin safety lists: BackupList (snapshots with restore) and BlockList (blocked IPs, emails, accounts).

Component · Admin · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/BackupList/)

Admin safety lists: `BackupList` (snapshots with restore) and `BlockList` (blocked IPs, emails, accounts).

BackupList: `items` ({id, name, kind, where, retention, size, status}), `onDownload`, `onRestore`, `footer`. Restore is always confirmed (ConfirmDialog) by the app.
BlockList: `items` ({id, value, kind, reason, by, until}), `onAdd`, `onRemove`, `addLabel`, `removeLabel`, `searchPlaceholder`, `emptyText`.

## Example

```tsx
import * as React from "react";
import { BackupList, BlockList } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-grid"
      style={
        {
          "--cols": "1fr 1fr",
          gap: 16,
          alignItems: "start",
        } as React.CSSProperties
      }
    >
      <div className="tf-panel tf-panel-flush tf-panel-list">
        <BackupList
          onDownload={() => {}}
          onRestore={() => {}}
          footer="Kept for 30 days · restore test passed Nov 2"
          items={[
            {
              id: 1,
              name: "Today 03:00",
              kind: "Database",
              where: "R2 Frankfurt",
              size: "1.84 GB",
              status: "ok",
            },
            {
              id: 2,
              name: "Yesterday 03:00",
              kind: "Database",
              where: "R2 Frankfurt",
              size: "1.83 GB",
              status: "ok",
            },
            {
              id: 3,
              name: "Sun 03:00",
              kind: "Files",
              where: "R2 Frankfurt",
              size: "12.4 GB",
              status: "warn",
            },
          ]}
        />
      </div>
      <div className="tf-panel">
        <BlockList
          onAdd={() => {}}
          onRemove={() => {}}
          items={[
            {
              id: 1,
              value: "185.220.101.4",
              kind: "IP",
              reason: "Card testing",
              by: "Fraud rule",
              until: "Nov 15",
            },
            {
              id: 2,
              value: "spam@mailinator.com",
              kind: "Email",
              reason: "Chargeback",
              by: "Lukas",
            },
            {
              id: 3,
              value: "@growthhacker_xx",
              kind: "Account",
              reason: "Abuse",
              by: "Mara Ellis",
              until: "Dec 1",
            },
          ]}
        />
      </div>
    </div>
  );
}
```

## Props

### BackupList

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `{ id: string \| number; name?: string; time?: string; kind?: string; where?: string; retention?: string; size?: string; status?: Status; }[]` | Required |
| `onDownload?` | `(b: NonNullable<BackupListProps["items"]>[number]) => void` |  |
| `onRestore?` | `(b: NonNullable<BackupListProps["items"]>[number]) => void` |  |
| `footer?` | `ReactNode` |  |
| `label?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### BlockList

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `{ id: string \| number; value: string; kind?: string; reason?: string; by?: string; until?: string; }[]` | Required |
| `onAdd?` | `() => void` |  |
| `onRemove?` | `(b: NonNullable<BlockListProps["items"]>[number]) => void` |  |
| `addLabel?` | `string` |  |
| `removeLabel?` | `string` |  |
| `searchPlaceholder?` | `string` |  |
| `emptyText?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |