Complete avatar component

src/components/Avatar/index.tsx

@@ -1,7 +1,17 @@
 import { Wrapper } from './styles';
 
-const Avatar = () => {
+type AvatarProps = {
-  return <Wrapper></Wrapper>;
+  color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
+  size?: 'small' | 'big';
+  text: string;
+};
+
+const Avatar = ({ color, size = 'small', text }: AvatarProps) => {
+  return (
+    <Wrapper color={color} size={size}>
+      {text}
+    </Wrapper>
+  );
 };
 
 export default Avatar;

src/components/Avatar/styles.ts

@@ -1,3 +1,40 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const Wrapper = styled.div``;
+type WrapperProps = {
+  color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
+  size?: 'small' | 'big';
+};
+
+export const Wrapper = styled.div<WrapperProps>`
+  border-radius: 50%;
+  background: ${({ theme, color }) =>
+    color ? theme.colors[color].main : theme.colors.client.main};
+  color: ${({ theme }) => theme.colors.white.main};
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+
+  ${({ size }) => {
+    switch (size) {
+      case 'small':
+        return css`
+          width: 25px;
+          height: 25px;
+          font-size: 12px;
+        `;
+      case 'big':
+        return css`
+          width: 50px;
+          height: 50px;
+          font-size: 24px;
+        `;
+      default:
+        return css`
+          width: 25px;
+          height: 25px;
+          font-size: 12px;
+        `;
+    }
+  }}
+`;

src/components/index.tsx

@@ -6,7 +6,9 @@ import Input from './Input';
 import TextArea from './TextArea';
 import Select from './Select';
 import Search from './Search';
+import Avatar from './Avatar';
 import ContextMenu from './ContextMenu';
 
   Search,
+  Avatar,
   ContextMenu,