mirror of
https://github.com/suitenumerique/meet.git
synced 2026-08-06 17:07:46 +00:00
lebaudantoine
fca7c3b8b8
The Avatar was rendered as an image, which made the initials centering unreliable across sizes and browsers. Render the Avatar as an SVG instead, which allows the initials to be properly centered by construction.
68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
import { css, cva, RecipeVariantProps } from '@/styled-system/css'
|
|
import React from 'react'
|
|
|
|
const avatar = cva({
|
|
base: {
|
|
backgroundColor: 'transparent',
|
|
color: 'white',
|
|
display: 'flex',
|
|
borderRadius: '50%',
|
|
userSelect: 'none',
|
|
cursor: 'default',
|
|
flexGrow: 0,
|
|
flexShrink: 0,
|
|
overflow: 'hidden',
|
|
},
|
|
variants: {
|
|
context: {
|
|
subtitles: { width: '40px', height: '40px' },
|
|
list: { width: '32px', height: '32px' },
|
|
placeholder: { width: '100%', height: '100%' },
|
|
},
|
|
notification: {
|
|
true: { border: '2px solid white' },
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
context: 'list',
|
|
},
|
|
})
|
|
|
|
export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
name?: string
|
|
bgColor?: string
|
|
} & RecipeVariantProps<typeof avatar>
|
|
|
|
export const Avatar = React.memo(
|
|
({ name, bgColor, context, notification, style, ...props }: AvatarProps) => {
|
|
const initial = name?.trim()?.charAt(0) ?? ''
|
|
return (
|
|
<div
|
|
style={{ backgroundColor: bgColor, ...style }}
|
|
className={avatar({ context, notification })}
|
|
{...props}
|
|
>
|
|
<svg
|
|
viewBox="0 0 100 100"
|
|
aria-hidden="true"
|
|
className={css({ width: '100%', height: '100%', display: 'block' })}
|
|
>
|
|
<text
|
|
x="50"
|
|
y="50"
|
|
textAnchor="middle"
|
|
dominantBaseline="central"
|
|
fontSize="52"
|
|
fontWeight="500"
|
|
fill="currentColor"
|
|
>
|
|
{initial}
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
Avatar.displayName = 'Avatar'
|