Отображение данных userlistdata

Directory Card

Строка каталога пользователей с аватаром, ролью, контактами и меню действий.

John Doe

Software Engineer

Online

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

---
import { DirectoryCard } from 'astro-component-kit';
---

<UserDirectoryItem>Content</UserDirectoryItem>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/DirectoryCard.astro:

---
---
<div class="u-item">
  <div class="u-pic">JS</div>
  <div class="u-info"><h5>John Doe</h5><p>Software Engineer</p></div>
  <div class="u-stat">Online</div>
</div>
<style>
  .u-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.03); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); transition: 0.2s; }
  .u-item:hover { border-color: rgba(99, 102, 241, 0.4); background: rgba(99, 102, 241, 0.05); }
  .u-pic { width: 42px; height: 42px; background: linear-gradient(135deg, #6366f1, #c084fc); border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 0.8rem; }
  .u-info h5 { margin: 0; color: #fff; font-size: 1rem; }
  .u-info p { margin: 2px 0 0; font-size: 0.75rem; color: #64748b; }
  .u-stat { margin-left: auto; font-size: 0.65rem; color: #34d399; font-weight: 800; text-transform: uppercase; background: rgba(52, 211, 153, 0.1); padding: 2px 8px; border-radius: 4px; }
</style>

Краткая информация

Категория: Отображение данных
Имя файла: DirectoryCard.astro
Зависимости: Нет — чистый Astro + CSS
Теги: userlistdata