AvatarImage

AvatarImage

The AvatarImage component displays a circular avatar with user initials. It extracts initials from a user's full name and renders them in a styled circle with two size variants.

Props

Name	Type	Required	Description
userName	string	✅	The full name of the user to extract initials from
size	'small' | 'large'	✅	The size variant of the avatar

Usage

import AvatarImage from '@/components/Layout/AvatarImage';

// Small avatar (for header)
<AvatarImage userName="John Doe" size="small" />

// Large avatar (for profile panel)
<AvatarImage userName="Jane Smith" size="large" />

// Single name
<AvatarImage userName="Admin" size="small" />

Initial Extraction Logic

The component intelligently extracts initials based on the name format:

Two or More Names

Takes the first letter of the first name and the first letter of the second name.

• Input: "John Doe" → Output: "JD"
• Input: "Mary Jane Watson" → Output: "MJ"

Single Name

Takes only the first letter of the single name.

• Input: "Admin" → Output: "A"
• Input: "System" → Output: "S"

Empty or Invalid Name

Returns an empty string if no valid name is provided.

• Input: "" → Output: ""
• Input: " " → Output: ""

Size Variants

Small

• Dimensions: 1.5rem × 1.5rem
• Font Size: 0.75rem
• Usage: Header global actions, compact displays

Large

• Dimensions: 4rem × 4rem
• Font Size: 1.4rem
• Usage: Profile panels, detailed user information sections

Styling

Base Styles

.profile-image {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  background-color: #c7d4e7;
  color: #072251;
  font-size: 1.4rem;
}

Size Classes

.small {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
}

.large {
  width: 4rem;
  height: 4rem;
}

Color Scheme

• Background: #c7d4e7 (Light blue-gray)
• Text: #072251 (Dark blue)
• Font Weight: Bold

Accessibility

• The component includes a data-testid="avatar-initials" attribute for testing
• The circular shape and high contrast ensure visibility
• Initials are displayed in a semantic div element

Use Cases

1. Header User Identification: Display user initials in the global header
2. Profile Panels: Show larger avatars in user profile sections
3. User Lists: Represent users visually in tables or lists
4. Comments/Activity: Identify users in activity feeds

Implementation Details

Initials Function

const getInitials = (userName: string) => {
  if (!userName) return "";
  const nameParts = userName.split(" ");
  if (nameParts.length >= 2) {
    return (nameParts[0]?.[0] || "") + (nameParts[1]?.[0] || "");
  } else if (nameParts.length === 1) {
    return nameParts[0]?.[0] || "";
  }
  return "";
};

Safety Features

• Null-safe with optional chaining (?.)
• Handles empty strings gracefully
• Validates input by splitting on whitespace and checking array length
• Returns empty string rather than throwing errors
• Safely handles multi-part names by taking only first two initials

Related Components

• HeaderPanelProfile: Uses large AvatarImage for profile display
• LayoutHeaderGlobalBar: Uses small AvatarImage in header actions

Best Practices

1. Consistent Naming: Use full names in "First Last" format for best results
2. Size Selection: Use small for headers, large for profile sections
3. Alternative Text: Consider wrapping in a container with proper ARIA labels for screen readers
4. Fallback Handling: Component gracefully handles missing or malformed names

Future Enhancements

Potential improvements could include:

• Support for custom colors based on user ID or preferences
• Image fallback support for profile pictures
• Additional size variants (medium, extra-large)
• Custom color schemes for different user roles