Complete avatar component

2026-05-02 02:30:29 +00:00 · 2021-04-21 00:26:48 +01:00
parent 1fec8671f1
commit 484792debf
3 changed files with 53 additions and 4 deletions
@@ -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;
+        `;
+    }
+  }}
+`;