({
size = 'medium',
shape = 'circle',
elevated = false,
className,
badge,
src,
icon,
text,
imgProps = {},
...rest
}: AvatarProps)
| 113 | }; |
| 114 | |
| 115 | const Root = ({ |
| 116 | size = 'medium', |
| 117 | shape = 'circle', |
| 118 | elevated = false, |
| 119 | className, |
| 120 | badge, |
| 121 | src, |
| 122 | icon, |
| 123 | text, |
| 124 | imgProps = {}, |
| 125 | ...rest |
| 126 | }: AvatarProps) => ( |
| 127 | <div |
| 128 | className={clsxMerge( |
| 129 | "bg-[url('https://tailframes.com/images/avatar.webp')] bg-cover bg-no-repeat", |
| 130 | avatarVariants({ |
| 131 | size, |
| 132 | shape, |
| 133 | badge: Boolean(badge), |
| 134 | image: Boolean(src), |
| 135 | text: Boolean(text), |
| 136 | icon: Boolean(icon), |
| 137 | elevated, |
| 138 | }), |
| 139 | className |
| 140 | )} |
| 141 | {...rest} |
| 142 | > |
| 143 | {!icon && !text && ( |
| 144 | <img src={src ?? 'https://tailframes.com/images/avatar.webp'} alt='' className='aspect-square' {...imgProps} /> |
| 145 | )} |
| 146 | {icon && !text && <div className={avatarIconVariants({ size })}>{icon}</div>} |
| 147 | {text && !icon && <span className={avatarTextVariants({ size })}>{text}</span>} |
| 148 | </div> |
| 149 | ); |
| 150 | |
| 151 | export function Avatar(props: AvatarProps) { |
| 152 | if (!props.badge) { |
nothing calls this directly
no test coverage detected