1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datos userlistdata

Directory Card

Fila de directorio de usuarios con avatar, datos de contacto, rol y acciones.

JS
John Doe

Software Engineer

Online

Uso

Copia y pega este código directamente en tu página de Astro:

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

<UserDirectoryItem>Content</UserDirectoryItem>
--- import { DirectoryCard } from 'astro-component-kit'; --- <UserDirectoryItem>Content</UserDirectoryItem>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/DirectoryCard.astro:

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>
--- --- <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>

Información Rápida

Categoría
Visualización de Datos
Nombre de archivo
DirectoryCard.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
userlistdata