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,