Avatar

Location: src/components/Avatar.jsx

Overview

Avatar is a reusable component that displays a user's avatar image or falls back to a colored initial when no image is available. The fallback color is deterministically generated from the user's ID, ensuring consistency across the application.

The component handles sizing, alt text, and CSS class composition. It is used throughout the platform in post headers, friend lists, conversation views, and profile pages.

Props

Prop	Type	Required	Default	Description
user	object	No	--	User object with id, display_name, and avatar_url fields
avatarUrl	string	No	--	Direct avatar URL; takes precedence over user.avatar_url
size	number	No	32	Size in pixels (sets width, height, minWidth, minHeight)
className	string	No	''	Additional CSS class names
alt	string	No	--	Alt text for the image; defaults to user.display_name or 'User'

Key Behaviors

• Image Mode: When a URL is available (via avatarUrl prop or user.avatar_url), renders an <img> element with the avatar avatar-img classes.
• Fallback Mode: When no URL exists, renders a <span> with the first letter of the display name on a deterministic background color.
• Color Generation: Uses a simple hash of the user ID to select from a palette of 12 colors, ensuring the same user always gets the same color.
• Font Sizing: The fallback initial font size scales with the avatar size, using Math.max(size * 0.4, 12) for readability.

Exported Utilities

Export	Description
generateColorFromId(id)	Returns a hex color string deterministically based on a user ID
getInitial	Re-exported from lib/utils for external use

Usage

import Avatar from '@/components/Avatar';

// With a user object
<Avatar user={post.profiles} size={40} />

// With a direct URL override
<Avatar user={friend} avatarUrl={friend.intent_avatar_url} size={36} />

// Large avatar with custom class
<Avatar user={profile} size={80} className="profile-avatar" />

Related

• PostHeader -- Uses Avatar indirectly via IntentBadge
• ConversationView -- Uses Avatar for message senders
• Profile -- Uses Avatar in the friends grid

---

Last updated: 2026-02-07