#99 UI: User Avatar Component

open medium Created 2025-11-27 07:22 · Updated 2025-11-27 07:22

Description

Edit
Create user avatar component with initials fallback. Component: api/ui/templates/components/user_avatar/ Files: - user_avatar.html - user_avatar.css - user_avatar.js Features: - Display: - Image from URL (Gravatar or custom) - Initials fallback (first letters of name) - Background color from name hash - Size variants (xs, sm, md, lg, xl) - Options: - Round or square - Border option - Status indicator dot (online, away, offline) - Click handler for profile link - Gravatar: - Auto-generate from email - Default to initials if no Gravatar - Color Generation: - Consistent color from email/name hash - Pleasant, accessible color palette - Dark text on light backgrounds JavaScript API: - UserAvatar.render(element, { email, name, size, showStatus }) - Globally usable: data-user-avatar attribute Sizes: - xs: 24px - sm: 32px - md: 40px (default) - lg: 56px - xl: 80px With ultra attention to details and correctness. Before closing: write comment summarizing implementation with screenshot.

Comments

Loading comments...

Context

Loading context...

Audit History

View All
Loading audit history...