Profile Avatar Glass

1// ========================================
2// PROFILE AVATAR GLASS - SPECIALIZED COMPONENT
3// Large profile avatar wrapper with custom sizing
4// Level 4: Specialized (wrapper over AvatarGlass)
5// ========================================
6 
7import { forwardRef, type CSSProperties } from 'react';
8import { type AvatarStatus } from '@/components/glass/ui/avatar-glass';
9import { statusSizes } from '@/lib/variants/avatar-glass-variants';
10import { cn } from '@/lib/utils';
11import { useHover } from '@/lib/hooks/use-hover';
12 
13export type ProfileAvatarSize = 'sm' | 'md' | 'lg' | 'xl';
14 
15export interface ProfileAvatarGlassProps extends React.HTMLAttributes<HTMLDivElement> {
16  /** User initials to display */
17  readonly initials: string;
18  /** Size variant (profile-specific sizing - larger than AvatarGlass) */
19  readonly size?: ProfileAvatarSize;
20  /** Optional status indicator */
21  readonly status?: AvatarStatus;
22  /** Enable pulsing glow animation */
23  readonly glowing?: boolean;
24}
25 
26/**
27 * Profile-specific size classes (larger than standard AvatarGlass)
28 */
29const profileSizeClasses: Record<ProfileAvatarSize, string> = {
30  sm: 'w-9 h-9 md:w-10 md:h-10 text-xs md:text-sm',
31  md: 'w-12 h-12 md:w-14 md:h-14 text-base md:text-lg',
32  lg: 'w-14 h-14 md:w-16 md:h-16 text-lg md:text-xl',
33  xl: 'w-18 h-18 md:w-20 md:h-20 text-xl md:text-2xl',
34};
35 
36/**
37 * Get CSS variables for status indicator colors
38 */
39const getStatusVars = (statusType: AvatarStatus): { bg: string; glow: string } => {
40  const statusVars: Record<AvatarStatus, { bg: string; glow: string }> = {
41    online: { bg: 'var(--status-online)', glow: 'var(--status-online-glow)' },
42    offline: { bg: 'var(--status-offline)', glow: 'none' },
43    busy: { bg: 'var(--status-busy)', glow: 'var(--status-busy-glow)' },
44    away: { bg: 'var(--status-away)', glow: 'var(--status-away-glow)' },
45  };
46  return statusVars[statusType];
47};
48 
49/**
50 * ProfileAvatarGlass - Large profile avatar with bold styling
51 *
52 * Built on top of the same CSS variables as AvatarGlass but with
53 * profile-specific sizing and bold font weight.
54 *
55 * @example
56 * ```tsx
57 * <ProfileAvatarGlass initials="JD" size="lg" glowing />
58 * <ProfileAvatarGlass initials="AS" status="online" />
59 * ```
60 */
61export const ProfileAvatarGlass = forwardRef<HTMLDivElement, ProfileAvatarGlassProps>(
62  ({ initials, size = 'lg', status, glowing = true, className, ...props }, ref) => {
63    const { isHovered, hoverProps } = useHover();
64 
65    const avatarStyles: CSSProperties = {
66// … truncated