Avatar
Named Facepile
Стопка аватаров с подписью словами: «Анна, Марк и ещё трое отметили макет» — кружки не отвечают, кто именно.
- avatar
- facepile
- activity
- feed
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/avatar-012
Анна, Марк и ещё 3 отметили макет каталога
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «avatar-012» (Named Facepile) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/avatar-012.json
Registry item: https://vibeui.ru/r/avatar-012.json
Ставится в: components/vibeui/avatar-012.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Стопка аватаров с подписью словами: «Анна, Марк и ещё трое отметили макет» — кружки не отвечают, кто именно.
Строка активности: стопка аватаров и подпись словами по правилу «двое и ещё N». Кружки декоративны, смысл несёт текст. Ноль зависимостей, один файл, клиентского JS нет.
## 3. Как использовать
import { Avatar012 } from "@/components/vibeui/avatar-012"
<Avatar012
names={["Анна Петрова", "Марк Ильин", "Мария Гурова"]}
action="отметили"
target="макет каталога"
/>
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- локальную палитру --vibeui-avatar-012-* и не подменять её токенами вашей темы
- подпись словами: одни кружки не отвечают на вопрос «кто именно»
- правило «двое и ещё N» вместо перечисления всех — иначе строка занимает экран
- aria-hidden на кружках: имена уже прочитаны в тексте
- однострочность с обрезкой многоточием
- выделение имён насыщенным цветом на фоне приглушённой подписи
## 6. Можно менять
- массив names
- action и target — что именно сделали
- число видимых кружков
- ширину строки через max-width
## 7. Правила
- Порядок имён важен: первыми ставьте тех, кого читатель знает — обычно это недавние участники.
- Для одного человека подпись выродится в «Анна отметила»: проверьте согласование в своём языке.
- Строка не кликабельна: ссылки на профили навешивает вызывающий код.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/avatar-012.jsonhttps://vibeui.ru/r/avatar-012.jsonКомпонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-avatar-012-*. Серверный: хуков нет. Подпись строится по правилу «двое и ещё N»: перечислять всех в ленте нельзя, строка обязана остаться однострочной и режется многоточием. Кружки помечены aria-hidden — имена уже есть в тексте, дублировать их для скринридера незачем.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Avatar012Props = Omit<
ComponentPropsWithoutRef<"div">,
"children"
> & {
names?: string[]
action?: string
target?: string
}
// Идея компонента: стопка аватаров с подписью словами. Одни кружки не
// отвечают на вопрос «кто именно»: имена читаются, счётчик — нет. Подпись
// строится по правилу «двое и ещё N», а не перечислением всех: в списке из
// сорока участников строка иначе занимает три экрана.
const STYLES = `
:where([data-vibeui-block="avatar-012"]){
--vibeui-avatar-012-size:1.75rem;
--vibeui-avatar-012-overlap:0.5rem;
--vibeui-avatar-012-bg:oklch(1 0 0);
--vibeui-avatar-012-fg:oklch(0.22 0.014 265);
--vibeui-avatar-012-muted:oklch(0.52 0.014 265);
--vibeui-avatar-012-border:oklch(0.9 0.006 265);
--vibeui-avatar-012-ring:oklch(1 0 0);
--vibeui-avatar-012-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="avatar-012"]{
display:flex;align-items:center;gap:0.625rem;
box-sizing:border-box;width:100%;max-width:24rem;padding:0.625rem 0.75rem;
background:var(--vibeui-avatar-012-bg);
border:1px solid var(--vibeui-avatar-012-border);border-radius:9999px;
color:var(--vibeui-avatar-012-fg);font-family:var(--vibeui-avatar-012-font);
}
[data-vibeui-block="avatar-012"] [data-part="stack"]{display:flex;align-items:center;flex:none}
[data-vibeui-block="avatar-012"] [data-part="item"]{
display:flex;align-items:center;justify-content:center;flex:none;
width:var(--vibeui-avatar-012-size);height:var(--vibeui-avatar-012-size);
border-radius:9999px;box-shadow:0 0 0 2px var(--vibeui-avatar-012-ring);
background:oklch(0.92 0.05 var(--vibeui-avatar-012-hue,250));
color:oklch(0.38 0.09 var(--vibeui-avatar-012-hue,250));
font-size:calc(var(--vibeui-avatar-012-size) * 0.36);font-weight:650;line-height:1;
user-select:none;
}
[data-vibeui-block="avatar-012"] [data-part="item"] + [data-part="item"]{margin-left:calc(var(--vibeui-avatar-012-overlap) * -1)}
[data-vibeui-block="avatar-012"] [data-part="item"]:nth-child(1){z-index:3}
[data-vibeui-block="avatar-012"] [data-part="item"]:nth-child(2){z-index:2}
[data-vibeui-block="avatar-012"] [data-part="item"]:nth-child(3){z-index:1}
/* Подпись режется многоточием: строка обязана остаться однострочной. */
[data-vibeui-block="avatar-012"] [data-part="caption"]{
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-size:0.8125rem;line-height:1.3;color:var(--vibeui-avatar-012-muted);
}
[data-vibeui-block="avatar-012"] [data-part="caption"] b{color:var(--vibeui-avatar-012-fg);font-weight:600}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="avatar-012"] *{animation:none!important;transition:none!important}}
`
const DEFAULT_NAMES = [
"Анна Петрова",
"Марк Ильин",
"Мария Гурова",
"Олег Дроздов",
"Ирина Ким",
]
// Оттенок из имени: FNV-1a, разложенный по двенадцати ступеням круга.
// Сумма кодов символов не годится — кириллические имена ложатся в один
// розовый сектор; ступени в 30° дают заведомо различимые цвета.
function hue(name: string) {
let hash = 2166136261
for (const symbol of name) {
hash ^= symbol.codePointAt(0)!
hash = Math.imul(hash, 16777619)
}
return ((hash >>> 0) % 12) * 30
}
function initials(name: string) {
return name
.split(" ")
.slice(0, 2)
.map((part) => part[0]?.toUpperCase() ?? "")
.join("")
}
function first(name: string) {
return name.split(" ")[0]
}
/**
* Стопка аватаров с подписью словами: «Анна, Марк и ещё трое».
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Avatar012({
names = DEFAULT_NAMES,
action = "отметили",
target = "макет каталога",
className,
style,
...props
}: Avatar012Props) {
const shown = names.slice(0, 3)
const rest = names.length - 2
return (
<>
<style href="vibeui-avatar-012" precedence="medium">
{STYLES}
</style>
<div
{...props}
data-vibeui-block="avatar-012"
className={className}
style={style as CSSProperties}
>
<span data-part="stack" aria-hidden="true">
{shown.map((name) => (
<span
key={name}
data-part="item"
style={{ "--vibeui-avatar-012-hue": hue(name) } as CSSProperties}
>
{initials(name)}
</span>
))}
</span>
<span data-part="caption">
<b>{first(names[0])}</b>
{names.length > 1 ? (
<>
, <b>{first(names[1])}</b>
</>
) : null}
{rest > 0 ? ` и ещё ${rest}` : ""} {action} {target}
</span>
</div>
</>
)
}