Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | 'use client';
/**
* AvatarImage Component
*
* Avatar/profile image component with:
* - Multiple size presets
* - Initials fallback when no image
* - Loading skeleton
* - Error handling
*/
import { memo, useState, useCallback } from 'react';
import Image from 'next/image';
import { cn } from '@/lib/core';
interface AvatarImageProps {
/** Image source URL */
src?: string | null;
/** Alt text for accessibility */
alt: string;
/** Size preset */
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
/** Custom size in pixels (overrides preset) */
customSize?: number;
/** Initials to show when no image */
fallbackInitials?: string;
/** Additional CSS classes */
className?: string;
/** Background color for initials fallback */
fallbackBgColor?: string;
/** Show loading skeleton */
showSkeleton?: boolean;
}
const sizeConfig = {
xs: { dimension: 24, textSize: 'text-[10px]' },
sm: { dimension: 32, textSize: 'text-xs' },
md: { dimension: 40, textSize: 'text-sm' },
lg: { dimension: 56, textSize: 'text-base' },
xl: { dimension: 80, textSize: 'text-lg' },
'2xl': { dimension: 120, textSize: 'text-2xl' },
};
/**
* Extract initials from a name string
*/
function getInitials(name: string): string {
const parts = name.trim().split(/\s+/);
if (parts.length >= 2) {
return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
}
return name.slice(0, 2).toUpperCase();
}
export const AvatarImage = memo(function AvatarImage({
src,
alt,
size = 'md',
customSize,
fallbackInitials,
className,
fallbackBgColor,
showSkeleton = true,
}: AvatarImageProps) {
const [isLoading, setIsLoading] = useState(true);
const [hasError, setHasError] = useState(false);
const config = sizeConfig[size];
const dimension = customSize || config.dimension;
const initials = fallbackInitials || getInitials(alt);
const handleLoad = useCallback(() => {
setIsLoading(false);
}, []);
const handleError = useCallback(() => {
setHasError(true);
setIsLoading(false);
}, []);
// Show initials fallback if no src or error
if (!src || hasError) {
return (
<div
className={cn(
'flex items-center justify-center rounded-full',
'bg-gradient-to-br from-blue-500 to-purple-600 text-white font-medium',
config.textSize,
className
)}
style={{
width: dimension,
height: dimension,
backgroundColor: fallbackBgColor,
}}
role="img"
aria-label={alt}
>
{initials}
</div>
);
}
return (
<div
className={cn('relative overflow-hidden rounded-full', className)}
style={{ width: dimension, height: dimension }}
>
{/* Loading skeleton */}
{showSkeleton && isLoading && (
<div
className="absolute inset-0 bg-gray-200 dark:bg-gray-700 animate-pulse rounded-full"
aria-hidden="true"
/>
)}
<Image
src={src}
alt={alt}
width={dimension}
height={dimension}
className={cn(
'rounded-full object-cover transition-opacity duration-300',
isLoading ? 'opacity-0' : 'opacity-100'
)}
onLoad={handleLoad}
onError={handleError}
/>
</div>
);
});
export default AvatarImage;
|