# @cloud-ru/ds-uikit-product-notification

> Пакет уведомлений — карточка NotificationCard, лента NotificationPanelContent со стеками и группами и адаптивная обёртка NotificationPanel (drawer на desktop, bottom-sheet на mobile).

Docs: /snack-v2/components/uikit-product-notification/

## Установка

```sh
pnpm add @cloud-ru/ds-uikit-product-notification
```

## API

### ActionsButton
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `actions` | `Action[]` | — | yes |  |
| `className` | `string` | — | no |  |
| `icon` | `ReactElement<any, string \| JSXElementConstructor<any>>` | — | yes |  |
| `open` | `boolean` | — | yes |  |
| `setDroplistOpen` | `Dispatch<SetStateAction<boolean>>` | — | yes |  |
| `testIds` | `ActionsButtonTestIds` | — | yes |  |
| `triggerAriaLabel` | `string` | — | yes | Доступное имя кнопки-триггера (icon-only кнопка иначе безымянна для скринридера). |

### NotificationCard
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `actions` | `Action[]` | — | no | Дополнительные действия у карточки |
| `appearance` | `default \| error \| success \| warning` | `default` | no | Тип уведомления |
| `className` | `string` | — | no | CSS-класс |
| `data-test-id` | `string` | — | no |  |
| `date` | `string` | — | yes | Дата уведомления |
| `description` | `ReactNode` | — | no | Описание уведомления — вторичный текст под заголовком |
| `id` | `string` | — | yes | Идентификатор уведомления |
| `label` | `string` | — | no | Лейбл перед заголовком |
| `link` | `PickLinkProps<"a", "label" \| "truncateVariant" \| "insideText">` | — | no | Ссылка (рендерится как `<a href>` через `@cloud-ru/ds-link`) |
| `onClick` | `MouseEventHandler<HTMLDivElement>` | — | no | Колбэк клика по карточке. Делает карточку кликабельной (`role='button'`, фокус с клавиатуры). Активация по карточке срабатывает только при фокусе на самой карточке — вложенные кнопки, ссылка и меню действий активируются независимо. |
| `onVisible` | `((cardId: string) => void)` | — | no | Колбэк при попадании карточки в область видимости на 80% |
| `primaryButton` | `NotificationButtonProps` | — | no | Кнопка главного действия у карточки (рендерится как Button view='tonal') |
| `secondaryButton` | `NotificationButtonProps` | — | no | Кнопка второстепенного действия у карточки (рендерится как Button view='simple') |
| `title` | `string` | — | yes | Заголовок уведомления |
| `unread` | `boolean` | — | no | Управление состоянием прочитано/не прочитано |

#### Related types
- `Action` (interface)
- `Appearance` = `default | error | success | warning`
- `CounterProps` (interface)
- `IconPosition` = `after | before`
- `ItemContent` (interface)
- `NotificationButtonProps` (interface)
- `PickLinkProps` (alias)
- `PolymorphicRef` (alias)

### NotificationCardSkeleton
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `className` | `string` | — | no | CSS-класс |
| `data-test-id` | `string` | — | no |  |

### NotificationCardStack
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `actions` | `Action[]` | — | no | Список действий в выпадающем меню |
| `children` | `Iterable<ReactNode>` | — | yes | Карточки в стопке, видна первая карточка, остальные схлопываются под нее. |
| `data-test-id` | `string` | — | no |  |
| `defaultOpen` | `boolean` | — | no | Состояние открыт/закрыт по умолчанию |
| `onOpenChanged` | `((open: boolean) => void)` | — | no | Колбек смены состояния открыт/закрыт |
| `title` | `string` | — | yes | Заголовок стопки карточек |
| `unread` | `boolean` | — | no | Состояние непрочитанных карточек |

#### Related types
- `Action` (interface)
- `ItemContent` (interface)

### NotificationPanel
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `className` | `string` | — | no | CSS-класс для элемента с контентом |
| `closeOnPopstate` | `boolean` | — | no | Закрывать дровер при перемещении по истории браузера |
| `container` | `string \| HTMLElement` | — | no | Контейнер в котором будет рендерится Drawer. По-умолчанию - body |
| `content` | `ReactElement<NotificationPanelContentProps, typeof NotificationPanelContent>` | — | yes | Контент панели (`NotificationPanelContent`), отображаемый внутри обёртки |
| `data-test-id` | `string` | — | no |  |
| `onClose` | `() => void` | — | yes | Колбэк закрытия |
| `open` | `boolean` | — | yes | Управление состоянием показан/не показан. |
| `position` | `bottom \| left \| right \| top` | `right` | no | Расположение |
| `rootClassName` | `string` | — | no | CSS-класс для корневого элемента |
| `showBlackout` | `boolean` | `true` | no | Отображение темной подложки |
| `width` | `string \| number` | `s` | no | Ширина (только при position: "left" \| "right") |

#### Related types
- `ButtonProps` (interface)
- `NotificationPanelContentProps` (interface)
- `NotificationPanelSettingsProps` (interface)
- `Position` = `bottom | left | right | top`
- `SegmentControlProps` (interface)
- `TooltipProps` (interface)
- `Width` = `auto | full`

### NotificationPanelBlank
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `className` | `string` | — | no | Дополнительный класс |
| `content` | `ReactNode` | — | no | Подзаголовок |
| `data-test-id` | `string` | — | no |  |
| `icon` | `IconPredefinedProps` | — | no | Иконка |
| `title` | `string` | — | no | Заголовок |

#### Related types
- `Appearance` = `default | error | success | warning`
- `IconPredefinedProps` (interface)
- `Size` = `s | xs`

### NotificationPanelContent
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `chipToggle` | `{ label: string; checked: boolean; onChange(checked: boolean): void; }` | — | no | Переключатель для фильтрации |
| `className` | `string` | — | no |  |
| `content` | `ReactNode` | — | no | Контент для отрисовки (e.g NotificationCard \| NotificationPanelContent.Blank) |
| `data-test-id` | `string` | — | no |  |
| `loading` | `boolean` | — | no | Состояние загрузки |
| `readAllButton` | `(Omit<ButtonProps, "data-test-id" \| "size"> & { tooltip?: TooltipProps; })` | — | no | Кнопка в "шапке" панели |
| `scrollContainerRef` | `RefObject<HTMLElement>` | — | no | Ссылка на контейнер, который скроллится |
| `scrollEndRef` | `RefObject<HTMLDivElement>` | — | no | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
| `segments` | `Omit<SegmentControlProps, "data-test-id" \| "size">` | — | no | Сегменты для фильтрации |
| `settings` | `NotificationPanelSettingsProps` | — | no | Кнопка настроек и выпадающий список |
| `skeletonsAmount` | `number` | `2` | no | Количество скелетонов карточек для отображения при загрузке |
| `title` | `string` | — | yes | Заголовок панели |

#### Related types
- `Action` (interface)
- `ButtonProps` (interface)
- `ChildrenFunction` (alias)
- `NotificationPanelSettingsProps` (interface)
- `Placement` = `bottom | bottom-end | bottom-start | left | left-end | left-start | right | right-end | right-start | top | top-end | top-start`
- `Segment` (interface)
- `SegmentControlProps` (interface)
- `Size` = `s | xs`
- `TooltipProps` (interface)
- `Trigger` = `click | clickAndFocusVisible | focus | focusVisible | hover | hoverAndFocus | hoverAndFocusVisible`
- `Value` = `0% | 100% | 50%`
- `Width` = `auto | full`

### NotificationPanelGroup
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `children` | `ReactNode` | — | yes | Содержимое группы |
| `className` | `string` | — | no | CSS-класс |
| `data-test-id` | `string` | — | no |  |
| `title` | `string` | — | yes | Заголовок группы |

### NotificationPanelSettings
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `actions` | `Action[]` | — | no | Дополнительные действия панели |
| `button` | `Omit<ButtonProps<ElementType>, "data-test-id" \| "view" \| "label" \| "size">` | — | no | Кнопка дополнительного действия панели |
| `size` | `m \| s` | `m` | no |  |

#### Related types
- `Action` (interface)
- `Appearance` = `default | error | success | warning`
- `ButtonProps` (interface)
- `CounterProps` (interface)
- `IconPosition` = `after | before`
- `ItemContent` (interface)
- `PolymorphicRef` (alias)
- `Size` = `s | xs`
- `View` = `elevated | filled | function | outline | simple | tonal`

### NotificationPanelSettingsDroplist
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `actions` | `Action[]` | — | yes |  |
| `button` | `ButtonProps<ElementType>` | — | yes |  |

### StackTail
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `count` | `number` | — | yes |  |
| `open` | `boolean` | — | yes |  |

## Примеры

### BasicCard

```tsx
import { APPEARANCE, NotificationCard } from '@cloud-ru/ds-uikit-product-notification';

export function BasicCard() {
  return (
    <NotificationCard
      id='backup-1729'
      label='Backup'
      appearance={APPEARANCE.Success}
      title='Резервная копия завершена'
      description='Бэкап БД prod-1 (412 ГБ) загружен в холодное хранилище s3://backups-prod/2026-05-27/'
      date='сегодня · 14:32'
    />
  );
}
```

### DeployFailureCard

```tsx
import { APPEARANCE, NotificationCard } from '@cloud-ru/ds-uikit-product-notification';
import { useState } from 'react';

export function DeployFailureCard() {
  const [status, setStatus] = useState<'failed' | 'retrying' | 'dismissed'>('failed');

  if (status === 'dismissed') {
    return null;
  }

  return (
    <NotificationCard
      id='deploy-9217'
      label='api-gateway · v2.18.3'
      appearance={APPEARANCE.Error}
      title='Деплой не прошёл health-check'
      description='Readiness probe вернул 503 на 4 из 6 подов. Traffic не переключён на новую версию.'
      date='5 минут назад'
      primaryButton={{
        label: status === 'retrying' ? 'Запускаю…' : 'Повторить деплой',
        loading: status === 'retrying',
        onClick: () => {
          setStatus('retrying');
          // Если карточку закрыли во время повтора, по таймеру не возвращаем её в `failed`.
          setTimeout(() => setStatus(prev => (prev === 'retrying' ? 'failed' : prev)), 1200);
        },
      }}
      secondaryButton={{
        label: 'Логи пода',
        onClick: () => window.open('/logs/api-gateway/2.18.3', '_blank'),
      }}
      actions={[
        { content: { label: 'Отметить прочитанным' }, onClick: () => setStatus('dismissed') },
        { content: { label: 'Заглушить на 1 час' }, onClick: () => setStatus('dismissed') },
        { content: { label: 'Удалить' }, onClick: () => setStatus('dismissed') },
      ]}
    />
  );
}
```

### IncidentCard

```tsx
import { APPEARANCE, NotificationCard } from '@cloud-ru/ds-uikit-product-notification';

export function IncidentCard() {
  return (
    <NotificationCard
      id='inc-4821'
      label='INC-4821'
      appearance={APPEARANCE.Error}
      title='Кластер k8s-prod-1 деградирован'
      description='3 из 5 нод недоступны последние 6 минут. Pod scheduling приостановлен.'
      date='сегодня · 03:14'
      link={{ label: 'Открыть инцидент', href: '/incidents/INC-4821' }}
      unread
    />
  );
}
```

### PanelBasic

```tsx
import { APPEARANCE, NotificationCard, NotificationPanelContent } from '@cloud-ru/ds-uikit-product-notification';
import { useState } from 'react';

export function PanelBasic() {
  const [readIds, setReadIds] = useState<Set<string>>(new Set());
  const markRead = (id: string) => setReadIds(prev => (prev.has(id) ? prev : new Set(prev).add(id)));

  return (
    <NotificationPanelContent
      title='Уведомления'
      readAllButton={{
        label: 'Прочитать всё',
        onClick: () => setReadIds(new Set(['inc-4821', 'quota-var-data', 'deploy-9217', 'backup-1729'])),
      }}
      content={
        <>
          <NotificationCard
            id='inc-4821'
            label='INC-4821'
            appearance={APPEARANCE.Error}
            title='Кластер k8s-prod-1 деградирован'
            description='3 из 5 нод недоступны последние 6 минут.'
            date='03:14'
            link={{ label: 'Открыть инцидент', href: '/incidents/INC-4821' }}
            unread={!readIds.has('inc-4821')}
            onVisible={markRead}
          />
          <NotificationCard
            id='quota-var-data'
            label='Storage'
            appearance={APPEARANCE.Warning}
            title='Лимит дисковой квоты'
            description='Использовано 92% /var/data — осталось 38 ГБ из 480 ГБ.'
            date='02:50'
            unread={!readIds.has('quota-var-data')}
            onVisible={markRead}
          />
          <NotificationCard
            id='deploy-9217'
            label='api-gateway · v2.18.3'
            appearance={APPEARANCE.Error}
            title='Деплой не прошёл health-check'
            description='Readiness probe вернул 503 на 4 из 6 подов.'
            date='вчера · 23:11'
            unread={!readIds.has('deploy-9217')}
            onVisible={markRead}
          />
          <NotificationCard
            id='backup-1729'
            label='Backup'
            appearance={APPEARANCE.Success}
            title='Резервная копия завершена'
            description='Бэкап БД prod-1 (412 ГБ) загружен в s3://backups-prod/.'
            date='вчера · 14:32'
          />
        </>
      }
    />
  );
}
```

### PanelError

```tsx
import { CrossSVG } from '@cloud-ru/ds-icons/interface/system';
import { NotificationPanelContent } from '@cloud-ru/ds-uikit-product-notification';

export function PanelError() {
  return (
    <NotificationPanelContent
      title='Уведомления'
      content={
        <NotificationPanelContent.Blank
          icon={{ icon: CrossSVG, appearance: 'neutral' }}
          title='Сервис временно недоступен'
          content='Восстановление уже идёт. Обновите страницу через минуту.'
        />
      }
    />
  );
}
```

### PanelFull

```tsx
import { APPEARANCE, NotificationCard, NotificationPanelContent } from '@cloud-ru/ds-uikit-product-notification';
import { useMemo, useState } from 'react';

type Filter = 'all' | 'unread' | 'mentions';

type CardId = 'inc-4821' | 'deploy-9217' | 'stack-quota' | 'mention-1' | 'backup-1729';

export function PanelFull() {
  const [filter, setFilter] = useState<Filter>('all');
  const [importantOnly, setImportantOnly] = useState(false);
  const [muted, setMuted] = useState(false);
  const [readIds, setReadIds] = useState<Set<CardId>>(new Set());

  const markRead = (id: string) =>
    setReadIds(prev => (prev.has(id as CardId) ? prev : new Set(prev).add(id as CardId)));

  const isUnread = (id: CardId) => !readIds.has(id);

  // Какие карточки попадают под текущий фильтр. `important` — критичные алерты (error/warning).
  const visible = useMemo(() => {
    const matches = (id: CardId, important: boolean, mention: boolean) => {
      if (filter === 'unread' && !isUnread(id)) return false;
      if (filter === 'mentions' && !mention) return false;
      if (importantOnly && !important) return false;
      return true;
    };

    return {
      inc: matches('inc-4821', true, false),
      deploy: matches('deploy-9217', true, false),
      quota: matches('stack-quota', true, false),
      mention: matches('mention-1', false, true),
      backup: matches('backup-1729', false, false),
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [filter, importantOnly, readIds]);

  const attentionVisible = visible.inc || visible.deploy;

  if (muted) {
    return (
      <NotificationPanelContent
        title='Уведомления'
        settings={{
          button: { onClick: () => setMuted(false) },
          actions: [{ content: { label: 'Снять заглушение' }, onClick: () => setMuted(false) }],
        }}
        content={<NotificationPanelContent.Blank />}
      />
    );
  }

  return (
    <NotificationPanelContent
      title='Уведомления'
      segments={{
        items: [
          { value: 'all', label: 'Все' },
          { value: 'unread', label: 'Непрочитанные' },
          { value: 'mentions', label: 'Упоминания' },
        ],
        value: filter,
        onChange: value => setFilter(value as Filter),
      }}
      chipToggle={{
        label: 'Только важные',
        checked: importantOnly,
        onChange: setImportantOnly,
      }}
      settings={{
        button: {},
        actions: [
          { content: { label: 'Только непрочитанные' }, onClick: () => setFilter('unread') },
          { content: { label: 'Показать все' }, onClick: () => setFilter('all') },
          { content: { label: 'Заглушить на 1 час' }, onClick: () => setMuted(true) },
        ],
      }}
      readAllButton={{
        label: 'Прочитать всё',
        onClick: () => setReadIds(new Set(['inc-4821', 'deploy-9217', 'stack-quota', 'mention-1'])),
      }}
      content={
        <>
          {attentionVisible && (
            <NotificationPanelContent.Group title='Требуют внимания'>
              {visible.inc && (
                <NotificationCard
                  id='inc-4821'
                  label='INC-4821'
                  appearance={APPEARANCE.Error}
                  title='Кластер k8s-prod-1 деградирован'
                  description='3 из 5 нод недоступны последние 6 минут.'
                  date='03:14'
                  link={{ label: 'Открыть инцидент', href: '/incidents/INC-4821' }}
                  unread={isUnread('inc-4821')}
                  onVisible={markRead}
                />
              )}
              {visible.deploy && (
                <NotificationCard
                  id='deploy-9217'
                  label='api-gateway · v2.18.3'
                  appearance={APPEARANCE.Error}
                  title='Деплой не прошёл health-check'
                  description='Readiness probe вернул 503 на 4 из 6 подов.'
                  date='02:50'
                  primaryButton={{ label: 'Повторить', onClick: () => markRead('deploy-9217') }}
                  secondaryButton={{
                    label: 'Логи',
                    onClick: () => window.open('/logs/api-gateway/2.18.3', '_blank'),
                  }}
                  unread={isUnread('deploy-9217')}
                  onVisible={markRead}
                />
              )}
            </NotificationPanelContent.Group>
          )}

          {visible.quota && (
            <>
              <NotificationPanelContent.Stack
                title='Лимит дисковой квоты · 3 хоста'
                unread={isUnread('stack-quota')}
                actions={[
                  { content: { label: 'Прочитать все' }, onClick: () => markRead('stack-quota') },
                  { content: { label: 'Заглушить группу' }, onClick: () => setMuted(true) },
                ]}
                onOpenChanged={open => open && markRead('stack-quota')}
              >
                <NotificationCard
                  id='quota-prod-1'
                  label='Storage'
                  appearance={APPEARANCE.Warning}
                  title='prod-1 · /var/data'
                  description='Использовано 92% — осталось 38 ГБ из 480 ГБ.'
                  date='01:12'
                />
                <NotificationCard
                  id='quota-prod-2'
                  label='Storage'
                  appearance={APPEARANCE.Warning}
                  title='prod-2 · /var/log'
                  description='Использовано 87% — осталось 62 ГБ из 480 ГБ.'
                  date='00:48'
                />
                <NotificationCard
                  id='quota-stage-1'
                  label='Storage'
                  appearance={APPEARANCE.Warning}
                  title='stage-1 · /var/data'
                  description='Использовано 84% — осталось 76 ГБ из 480 ГБ.'
                  date='вчера · 23:50'
                />
              </NotificationPanelContent.Stack>
            </>
          )}

          {visible.mention && (
            <NotificationCard
              id='mention-1'
              label='@you · billing/PR-1402'
              appearance={APPEARANCE.Default}
              title='А. Иванов упомянул вас в PR'
              description='Пересмотрите расчёт grace-period в BillingScheduler.tsx:142'
              date='вчера · 18:20'
              link={{ label: 'Открыть PR', href: '/billing/pulls/1402' }}
              unread={isUnread('mention-1')}
              onVisible={markRead}
            />
          )}

          {visible.backup && (
            <>
              <NotificationCard
                id='backup-1729'
                label='Backup'
                appearance={APPEARANCE.Success}
                title='Резервная копия завершена'
                description='prod-1 (412 ГБ) → s3://backups-prod/2026-05-26/'
                date='вчера · 14:32'
              />
            </>
          )}
        </>
      }
    />
  );
}
```

### PanelLoading

```tsx
import { NotificationPanelContent } from '@cloud-ru/ds-uikit-product-notification';

export function PanelLoading() {
  return (
    <NotificationPanelContent
      title='Уведомления'
      loading
      skeletonsAmount={4}
      segments={{
        items: [
          { value: 'all', label: 'Все' },
          { value: 'unread', label: 'Непрочитанные' },
          { value: 'mentions', label: 'Упоминания' },
        ],
        value: 'all',
        onChange: () => {},
      }}
      readAllButton={{ label: 'Прочитать всё', onClick: () => {} }}
    />
  );
}
```

### PanelScenario

```tsx
import { Button } from '@cloud-ru/ds-button';
import {
  APPEARANCE,
  NotificationCard,
  NotificationPanel,
  NotificationPanelContent,
} from '@cloud-ru/ds-uikit-product-notification';
import { useMemo, useState } from 'react';

export function PanelScenario() {
  const [open, setOpen] = useState(false);
  const [readIds, setReadIds] = useState<Set<string>>(new Set());

  const unreadCount = useMemo(() => ['inc-4821', 'deploy-9217'].filter(id => !readIds.has(id)).length, [readIds]);

  const markRead = (id: string) => setReadIds(prev => (prev.has(id) ? prev : new Set(prev).add(id)));

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'flex-end',
        alignItems: 'center',
        padding: '12px 16px',
        minHeight: 56,
      }}
    >
      <Button
        label={unreadCount > 0 ? `Уведомления · ${unreadCount}` : 'Уведомления'}
        view='outline'
        appearance='neutral'
        onClick={() => setOpen(true)}
      />
      <NotificationPanel
        open={open}
        onClose={() => setOpen(false)}
        content={
          <NotificationPanelContent
            title='Уведомления'
            readAllButton={{
              label: 'Прочитать всё',
              onClick: () => setReadIds(new Set(['inc-4821', 'deploy-9217'])),
            }}
            content={
              <>
                <NotificationCard
                  id='inc-4821'
                  label='INC-4821'
                  appearance={APPEARANCE.Error}
                  title='Кластер k8s-prod-1 деградирован'
                  description='3 из 5 нод недоступны последние 6 минут.'
                  date='03:14'
                  link={{ label: 'Открыть инцидент', href: '/incidents/INC-4821' }}
                  unread={!readIds.has('inc-4821')}
                  onVisible={markRead}
                />
                <NotificationCard
                  id='deploy-9217'
                  label='api-gateway · v2.18.3'
                  appearance={APPEARANCE.Error}
                  title='Деплой не прошёл health-check'
                  description='Readiness probe вернул 503 на 4 из 6 подов.'
                  date='02:50'
                  primaryButton={{ label: 'Повторить', onClick: () => markRead('deploy-9217') }}
                  secondaryButton={{
                    label: 'Логи',
                    onClick: () => window.open('/logs/api-gateway/2.18.3', '_blank'),
                  }}
                  unread={!readIds.has('deploy-9217')}
                  onVisible={markRead}
                />
                <NotificationCard
                  id='backup-1729'
                  label='Backup'
                  appearance={APPEARANCE.Success}
                  title='Резервная копия завершена'
                  description='prod-1 (412 ГБ) → s3://backups-prod/2026-05-26/'
                  date='вчера · 14:32'
                />
              </>
            }
          />
        }
      />
    </div>
  );
}
```

### UnreadCard

```tsx
import { APPEARANCE, NotificationCard } from '@cloud-ru/ds-uikit-product-notification';
import { useState } from 'react';

export function UnreadCard() {
  const [readIds, setReadIds] = useState<Set<string>>(new Set());
  const markRead = (id: string) => setReadIds(prev => (prev.has(id) ? prev : new Set(prev).add(id)));

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <NotificationCard
        id='quota-var-data'
        label='Storage'
        appearance={APPEARANCE.Warning}
        title='Лимит дисковой квоты'
        description='Использовано 92% квоты на /var/data — осталось 38 ГБ из 480 ГБ.'
        date='вчера · 19:04'
        unread={!readIds.has('quota-var-data')}
        onVisible={markRead}
      />
      <NotificationCard
        id='quota-var-log'
        label='Storage'
        appearance={APPEARANCE.Warning}
        title='Лимит дисковой квоты'
        description='Использовано 87% квоты на /var/log — осталось 62 ГБ из 480 ГБ.'
        date='вчера · 17:50'
        unread={!readIds.has('quota-var-log')}
        onVisible={markRead}
      />
    </div>
  );
}
```