diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
index fe9df58..4f09faf 100644
--- a/src/components/Avatar/index.tsx
+++ b/src/components/Avatar/index.tsx
@@ -1,7 +1,17 @@
import { Wrapper } from './styles';
-const Avatar = () => {
- return ;
+type AvatarProps = {
+ color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
+ size?: 'small' | 'big';
+ text: string;
+};
+
+const Avatar = ({ color, size = 'small', text }: AvatarProps) => {
+ return (
+
+ {text}
+
+ );
};
export default Avatar;
diff --git a/src/components/Avatar/styles.ts b/src/components/Avatar/styles.ts
index 14ea300..7604bf6 100644
--- a/src/components/Avatar/styles.ts
+++ b/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`
+ 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;
+ `;
+ }
+ }}
+`;
diff --git a/src/components/index.tsx b/src/components/index.tsx
index e977b71..1ede9e1 100644
--- a/src/components/index.tsx
+++ b/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,