Clear git cache

2026-05-01 18:20:28 +00:00 · 2023-05-28 16:44:06 +01:00
parent 2a71d7927c
commit a5b7dfd72e
178 changed files with 29055 additions and 0 deletions
@@ -0,0 +1,119 @@
+import styled, { css } from 'styled-components';
+
+type WrapperProps = {
+  icon: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
+  color: 'client' | 'productOwner' | 'developer' | 'admin';
+  selected: boolean;
+  disabled: boolean;
+};
+
+export const Wrapper = styled.div<WrapperProps>`
+  width: 100%;
+  height: auto;
+  max-height: 50px;
+  padding: 15px 20px;
+  border-radius: 10px;
+  user-select: none;
+  cursor: pointer;
+
+  ${({ icon }) => {
+    if (icon)
+      return css`
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      `;
+    return '';
+  }}
+
+  .icon svg {
+    display: flex;
+    align-items: center;
+  }
+
+  .icon.left {
+    margin-right: 0.5rem;
+  }
+
+  ${({ color, theme, selected }) => {
+    switch (color) {
+      case 'client':
+        return css`
+          color: ${selected
+            ? theme.colors.client.main
+            : theme.colors.black.main};
+          background: ${selected ? theme.colors.client.light : 'none'};
+
+          svg path {
+            stroke: ${selected
+              ? theme.colors.client.main
+              : theme.colors.black.main};
+          }
+        `;
+      case 'productOwner':
+        return css`
+          color: ${selected
+            ? theme.colors.productOwner.main
+            : theme.colors.black.main};
+          background: ${selected ? theme.colors.productOwner.light : 'none'};
+
+          svg path {
+            stroke: ${selected
+              ? theme.colors.productOwner.main
+              : theme.colors.black.main};
+          }
+        `;
+      case 'developer':
+        return css`
+          color: ${selected
+            ? theme.colors.developer.main
+            : theme.colors.black.main};
+          background: ${selected ? theme.colors.developer.light : 'none'};
+
+          svg path {
+            stroke: ${selected
+              ? theme.colors.developer.main
+              : theme.colors.black.main};
+          }
+        `;
+      case 'admin':
+        return css`
+          color: ${selected
+            ? theme.colors.admin.main
+            : theme.colors.black.main};
+          background: ${selected ? theme.colors.admin.light : 'none'};
+
+          svg path {
+            stroke: ${selected
+              ? theme.colors.admin.main
+              : theme.colors.black.main};
+          }
+        `;
+      default:
+        return css`
+          color: ${selected
+            ? theme.colors.client.main
+            : theme.colors.black.main};
+          background: ${selected ? theme.colors.client.light : 'none'};
+
+          svg path {
+            stroke: ${selected
+              ? theme.colors.client.main
+              : theme.colors.black.main};
+          }
+        `;
+    }
+  }}
+
+  ${({ disabled, theme }) =>
+    disabled &&
+    css`
+      cursor: default;
+      color: ${theme.colors.gray.main};
+      background: none;
+
+      svg path {
+        stroke: ${theme.colors.gray.main};
+      }
+    `};
+`;