add intials to avatar

packages/status-react/src/system/avatar/avatar.tsx

@@ -1,18 +1,20 @@
 import React from 'react'
 
 import { Image } from '../image'
-import { Base, Indicator } from './styles'
+import { Base, Indicator, Initials } from './styles'
 
 import type { Variants } from './styles'
 
 interface Props {
   size: Variants['size']
+  name?: string
   indicator?: 'online' | 'offline'
   src?: string
+  color?: string
 }
 
 const Avatar = (props: Props) => {
-  const { size, src, indicator } = props
+  const { size, name, src, color, indicator } = props
 
   // const identicon = useMemo(() => {
   //   const colors = colorWheel
@@ -33,8 +35,11 @@ const Avatar = (props: Props) => {
   //   }
   // }, [contact])
 
+  const initials = name ? name.slice(0, 1) : ''
+
   return (
-    <Base size={size}>
+    <Base size={size} style={{ backgroundColor: color }}>
+      {initials && <Initials size={size}>{initials}</Initials>}
       {src && (
         <Image
           src={src}

packages/status-react/src/system/avatar/styles.tsx

@@ -6,7 +6,7 @@ export type Variants = VariantProps<typeof Base>
 
 export const Base = styled('div', {
   position: 'relative',
-  background: '$accent-6',
+  background: '$primary-1',
   borderRadius: '100%',
   flexShrink: 0,
 
@@ -79,3 +79,26 @@ export const Indicator = styled('span', {
     },
   },
 })
+
+export const Initials = styled('div', {
+  width: '100%',
+  height: '100%',
+  color: '$accent-11',
+  textAlign: 'center',
+  fontWeight: '$600',
+  fontSize: 15,
+  textTransform: 'uppercase',
+  verticalAlign: 'baseline',
+  variants: {
+    size: {
+      20: { fontSize: 'calc(20 * 0.5px)', lineHeight: '20px' },
+      24: { fontSize: 'calc(24 * 0.5px)', lineHeight: '24px' },
+      32: { fontSize: 'calc(32 * 0.5px)', lineHeight: '32px' },
+      36: { fontSize: 'calc(36 * 0.5px)', lineHeight: '36px' },
+      44: { fontSize: 'calc(44 * 0.5px)', lineHeight: '44px' },
+      64: { fontSize: 'calc(64 * 0.5px)', lineHeight: '64px' },
+      80: { fontSize: 'calc(80 * 0.5px)', lineHeight: '80px' },
+      120: { fontSize: 'calc(120 * 0.5px)', lineHeight: '120px' },
+    },
+  },
+})