feat: added background and initials in avatar

lib/components/Avatar/index.tsx

@@ -9,10 +9,22 @@ import styles from './styles.module.scss'
 
 const Avatar: FC<Props> = ({ 
   className,
-  children,
+  name,
+  image,
   size = 'md',
+  backgroundColor = '#339AF0',
+  fontColor = '#FFFFFF',
   ...rest 
 }: Props) => {
+  const getInitials = (): string => {
+    const names = name.split(' ')
+    const initials = (names[0] ? names[0][0] : '') + (names.length > 1 ? names[names.length -1][0] : '')
+
+    return initials
+  }
+
+  const avatarInitials = getInitials()
+
   return (
     <div
       className={classNames(className, styles.avatar, {
@@ -21,11 +33,21 @@ const Avatar: FC<Props> = ({
         [styles.medium]: size === 'md',
         [styles.large]: size === 'lg',
         [styles.xlarge]: size === 'xl',
-      })} 
+      })}
+      style={{
+        backgroundColor: backgroundColor
+      }} 
       {...rest} 
     >
-      A
-      {children}
+      {image && (
+        <img src={image} alt={name} />
+      )}
+
+      {!image && (
+        <span style={{ color: fontColor }}>
+          {avatarInitials}
+        </span>
+      )}
     </div>
   )
 }

lib/components/Avatar/styles.module.scss

@@ -1,33 +1,72 @@
+@use '../../theme/helpers.scss' as *;
+@use '../../theme/variables/font' as font;
+
 .avatar {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-
-  border: 1px solid red;
+  overflow: hidden;
 
   &.xsmall {
     width: 24px;
     height: 24px;
+
+    span {
+      font-size: 10px;
+      line-height: 10px;
+    }
   }
 
   &.small {
     width: 32px;
     height: 32px;
+
+    span {
+      font-size: 12px;
+      line-height: 12px;
+    }
   }
 
   &.medium {
     width: 48px;
     height: 48px;
+
+    span {
+      font-size: 16px;
+      line-height: 16px;
+    }
   }
 
   &.large {
     width: 64px;
     height: 64px;
+
+    span {
+      font-size: 20px;
+      line-height: 20px;
+    }
   }
 
   &.xlarge {
     width: 96px;
     height: 96px;
+
+    span {
+      font-size: 24px;
+      line-height: 24px;
+    }
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+
+  span {
+    font-family: font.$family-primary;
+    font-weight: font.$weight-semibold;
   }
 }

lib/components/Avatar/types.ts

@@ -4,4 +4,8 @@ type DivOwnProps = HTMLAttributes<HTMLDivElement>
 
 export interface AvatarProps extends DivOwnProps {
   size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  name: string
+  image?: string
+  backgroundColor?: string
+  fontColor?: string
 }

src/stories/Avatar.stories.tsx

@@ -21,9 +21,17 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Primary: Story = {
+export const Default: Story = {
   args: {
-    children: 'Primary',
+    name: 'Barry Allen',
     size: 'md'
   },
 };
+
+export const WithImage: Story = {
+  args: {
+    name: 'Miles Morales',
+    image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjHgsVzd219uJAtOb2q0zmXGA-aywczrDp3w&usqp=CAU',
+    size: 'md'
+  },
+};