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
| 'use client'
| import { useState } from 'react'
| import cn from '@/utils/classnames'
|
| export type AvatarProps = {
| name: string
| avatar: string | null
| size?: number
| className?: string
| textClassName?: string
| }
| const Avatar = ({
| name,
| avatar,
| size = 30,
| className,
| textClassName,
| }: AvatarProps) => {
| const avatarClassName = 'shrink-0 flex items-center rounded-full bg-primary-600'
| const style = { width: `${size}px`, height: `${size}px`, fontSize: `${size}px`, lineHeight: `${size}px` }
| const [imgError, setImgError] = useState(false)
|
| const handleError = () => {
| setImgError(true)
| }
|
| if (avatar && !imgError) {
| return (
| <img
| className={cn(avatarClassName, className)}
| style={style}
| alt={name}
| src={avatar}
| onError={handleError}
| />
| )
| }
|
| return (
| <div
| className={cn(avatarClassName, className)}
| style={style}
| >
| <div
| className={cn(textClassName, 'scale-[0.4] text-center text-white')}
| style={style}
| >
| {name[0].toLocaleUpperCase()}
| </div>
| </div>
| )
| }
|
| export default Avatar
|
|
