a16988b957
* feat(debug-store): Zustand store met hydration-flag voor debug-modus * feat(status-bar): dev-only debug-toggle via geïsoleerde sub-component * feat(globals.css): debug-mode overlay CSS voor data-debug-id elementen * feat(shared): data-debug-id+label op navigatie-componenten * feat(shared): data-debug-id+label op form/select-componenten * feat(shared): data-debug-id+label op display-componenten
35 lines
1,011 B
TypeScript
35 lines
1,011 B
TypeScript
'use client'
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg'
|
|
|
|
const SIZE_CLASSES: Record<AvatarSize, string> = {
|
|
xs: 'size-6 text-[10px]',
|
|
sm: 'size-8 text-xs',
|
|
md: 'size-10 text-sm',
|
|
lg: 'size-12 text-base',
|
|
}
|
|
|
|
interface UserAvatarProps {
|
|
userId: string
|
|
username: string
|
|
size?: AvatarSize
|
|
className?: string
|
|
}
|
|
|
|
export function UserAvatar({ userId, username, size = 'md', className }: UserAvatarProps) {
|
|
const initials = username.slice(0, 2).toUpperCase()
|
|
|
|
return (
|
|
<span data-debug-id="user-avatar" data-debug-label="UserAvatar — shared/user-avatar.tsx">
|
|
<Avatar className={cn(SIZE_CLASSES[size], className)}>
|
|
<AvatarImage src={`/api/users/${userId}/avatar`} alt={username} />
|
|
<AvatarFallback className="bg-primary-container text-primary-container-foreground font-medium">
|
|
{initials}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</span>
|
|
)
|
|
}
|