egutierrez
35bcb63300
Componentes React accesibles basados en Radix UI con soporte de temas via CSS variables. Incluye barrel export en index.ts. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
71 lines
1.9 KiB
Markdown
71 lines
1.9 KiB
Markdown
---
|
|
name: avatar
|
|
kind: component
|
|
lang: ts
|
|
domain: ui
|
|
version: "1.0.0"
|
|
purity: impure
|
|
signature: "Avatar(props: AvatarProps): JSX.Element"
|
|
description: "Imagen de usuario circular con fallback a iniciales generadas automaticamente. 5 tamaños via CVA."
|
|
tags: [avatar, user, image, component, ui, cva]
|
|
uses_functions: [cn_ts_core]
|
|
uses_types: []
|
|
returns: []
|
|
returns_optional: false
|
|
error_type: ""
|
|
imports: ["class-variance-authority"]
|
|
tested: false
|
|
tests: []
|
|
test_file_path: ""
|
|
file_path: "frontend/functions/ui/avatar.tsx"
|
|
props:
|
|
- name: src
|
|
type: "string"
|
|
required: false
|
|
description: "URL de la imagen"
|
|
- name: alt
|
|
type: "string"
|
|
required: false
|
|
description: "Texto alternativo de la imagen"
|
|
- name: fallback
|
|
type: "string"
|
|
required: false
|
|
description: "Nombre completo del que extraer iniciales (ej: 'Juan Perez' -> 'JP')"
|
|
- name: initials
|
|
type: "string"
|
|
required: false
|
|
description: "Iniciales explicitas para el fallback (sobrescribe fallback)"
|
|
- name: size
|
|
type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
|
|
required: false
|
|
description: "Tamanio del avatar (default: md)"
|
|
- name: className
|
|
type: "string"
|
|
required: false
|
|
description: "Clases CSS adicionales"
|
|
emits: []
|
|
has_state: true
|
|
framework: react
|
|
variant: [xs, sm, md, lg, xl]
|
|
---
|
|
|
|
## Ejemplo
|
|
|
|
```tsx
|
|
// Con imagen
|
|
<Avatar src="https://example.com/user.jpg" alt="Juan Perez" size="md" />
|
|
|
|
// Con fallback a iniciales
|
|
<Avatar fallback="Juan Perez" size="lg" />
|
|
|
|
// Iniciales explicitas
|
|
<Avatar initials="JD" size="sm" />
|
|
|
|
// Maneja error de imagen automaticamente
|
|
<Avatar src="/broken-url.jpg" fallback="Maria Garcia" />
|
|
```
|
|
|
|
## Notas
|
|
|
|
Usa estado interno para manejar errores de carga de imagen (onError). La funcion getInitials extrae 2 iniciales del nombre completo (primera y ultima palabra). Si solo hay una palabra, toma los 2 primeros caracteres. Usa forwardRef para compatibilidad con wrappers.
|