-
Notifications
You must be signed in to change notification settings - Fork 19
/
avatar.tsx
86 lines (79 loc) · 2.48 KB
/
avatar.tsx
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
import { Tooltip } from '@qovery/shared/ui'
import Icon from '../icon/icon'
export enum AvatarStyle {
NORMAL = 'normal',
STROKED = 'stroked',
}
export interface AvatarProps {
firstName: string
lastName?: string
url?: string
style?: AvatarStyle
icon?: string
logoUrl?: string
logoText?: string
className?: string
alt?: string
onClick?: () => void
size?: number
noTooltip?: boolean
}
export function Avatar(props: AvatarProps) {
const {
firstName,
lastName = '',
url,
style,
icon,
logoUrl,
logoText,
className = '',
alt,
onClick,
size = 32,
noTooltip = false,
} = props
const defineClass = `${style === AvatarStyle.STROKED ? 'border-2 border-element-light-lighter-400' : ''} ${
onClick ? 'cursor-pointer' : ''
}`
const avatarContent = (
<div
data-testid="avatar"
style={{ width: size, height: size }}
className={`block rounded-full relative ${defineClass} ${className}`}
onClick={() => onClick && onClick()}
>
{url ? (
<img src={url} alt={alt} className="w-full h-full rounded-full" />
) : (
<div className="w-full h-full rounded-full bg-element-light-lighter-400 text-center flex justify-center items-center">
<span className="text-xs text-text-500 font-medium relative">
{firstName && firstName.charAt(0).toUpperCase()}
{lastName && lastName.charAt(0).toUpperCase()}
</span>
</div>
)}
{icon && (
<Icon data-testid="avatar-icon" name={icon} className="absolute -bottom-1 -right-1 w-4 h-4 drop-shadow-sm" />
)}
{(logoUrl || logoText) && (
<div
data-testid="avatar-logo"
className="flex items-center text-sm font-medium w-[18px] h-[18px] rounded-full absolute top-[24px] -right-[2px]"
>
{logoUrl ? (
<span className="flex items-center justify-center w-full h-full bg-element-light-lighter-100 rounded-full p-[2px]">
<img src={logoUrl} alt="Logo Organization" />
</span>
) : (
<span className="w-full h-full text-xxs text-text-400 bg-element-light-lighter-300 border border-element-light-lighter-100 rounded-full flex items-center justify-center uppercase">
{logoText}
</span>
)}
</div>
)}
</div>
)
return !noTooltip ? <Tooltip content={`${firstName} ${lastName}`}>{avatarContent}</Tooltip> : <>{avatarContent}</>
}
export default Avatar