AvatarDetail

@cloud-ru/ds-uikit-product-avatar-detail — Типовой пользовательский блок из продуктового UI Kit: аватар с необязательным статус индикатором, имя, контактные данные для копирования и вторичное описание.

Типовой пользовательский блок из продуктового UI Kit: аватар с необязательным статус индикатором, имя, контактные данные для копирования и вторичное описание.

Когда использовать

• В профильных карточках, где нужно компактно показать аватар, имя и email/логин для копирования.
• В списках участников, владельцев ресурсов или ответственных, где важна быстрая идентификация пользователя.

Анатомия

Слоты

• name — обязательное имя пользователя; отображается рядом с аватаром, обрезается при переполнении.
• contactData — опциональные контактные данные (email, логин); при клике копируются в буфер.
• description — опциональное описание под основной строкой (роль, должность).
• avatar — пропсы аватара (appearance, status, src и др.) без name (берётся из корневого пропа).

Установка

pnpm add @cloud-ru/ds-uikit-product-avatar-detail

import { AvatarDetail, AvatarDetailProps } from '@cloud-ru/ds-uikit-product-avatar-detail'

Примеры использования

Базовый

import { AvatarDetail } from '@cloud-ru/ds-uikit-product-avatar-detail';

export function Basic() {
  return <AvatarDetail name='Иванов Иван' />;
}

С контактными данными

Кнопка с email копирует значение в буфер обмена.

import { AvatarDetail } from '@cloud-ru/ds-uikit-product-avatar-detail';

export function WithContactData() {
  return <AvatarDetail name='Петрова Мария' contactData='[email protected]' />;
}

С описанием

import { AvatarDetail } from '@cloud-ru/ds-uikit-product-avatar-detail';

export function WithDescription() {
  return <AvatarDetail name='Сидоров Алексей' description='Тимлид платформенной команды' />;
}

Кастомный аватар

Цвет и статус-индикатор передаются через проп avatar.

import { AvatarDetail } from '@cloud-ru/ds-uikit-product-avatar-detail';

export function WithCustomAvatar() {
  return (
    <AvatarDetail
      name='Козлова Анна'
      contactData='[email protected]'
      avatar={{ appearance: 'violet', status: 'green' }}
    />
  );
}

Полный набор пропсов

import { AvatarDetail } from '@cloud-ru/ds-uikit-product-avatar-detail';

export function Full() {
  return (
    <AvatarDetail
      name='Новиков Дмитрий'
      contactData='[email protected]'
      description='DevOps-инженер, Cloud Platform'
      avatar={{ appearance: 'green', status: 'green' }}
    />
  );
}

Props

AvatarDetailProps