Аватар пользователя

ts

import { UserAvatarComponent } from "luna";

const users = [
    {
      id: 1,
      displayName: 'Александр Смирнов',
      iconUrl: '/avatars/m1.webp',
    },
    {
      id: 2,
      displayName: 'Анна Петрова',
      iconUrl: '/avatars/w1.webp'
    },
    {
      id: 3,
      displayName: 'Елена Кузнецова',
      iconUrl: '/avatars/w2.webp'
    },
    {
      id: 4,
      displayName: 'Максим Попов',
      iconUrl: '/avatars/m2.webp'
    },
    {
      id: 5,
      displayName: 'Наталья Васильева',
      iconUrl: '/avatars/w3.webp'
    },
    {
      id: 6,
      displayName: 'Артем Соколов',
    },
]

html

<div class="avatars" style="display: flex; gap: 20px;">
  <UserAvatarComponent :user="u" v-for="u in users" :key="u.id" />
</div>

А

Ссылки

ts

import { UserLinkComponent } from "luna";

html

<div class="user-links" style="display: flex; gap: 20px;">
  <UserLinkComponent :user="u" v-for="u in users" :key="u.id" />
</div>

Александр СмирновАнна ПетроваЕлена КузнецоваМаксим ПоповНаталья ВасильеваАртем Соколов