feat(website): init

2020-10-05 10:14:49 +02:00
parent f54b93b319
commit 277e032770
140 changed files with 30517 additions and 0 deletions
@@ -0,0 +1,87 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { rgba } from 'utils/css-utils';
+import { Flex } from 'reflexbox';
+
+import Icon from 'components/Icon';
+import { getThemeColor } from 'utils/css-utils';
+
+const Button = styled.button`
+  color: ${(p) => p.theme.colors[p.color || 'button']};
+  border: ${(p) =>
+    p.type === 'ghost'
+      ? '1px solid rgba(0,0,0,0)'
+      : `1px solid ${p.theme.colors[p.color || 'button']}`};
+  background: ${(p) =>
+    p.active
+      ? rgba(p.color ? p.theme.colors[p.color] : p.theme.colors.button, 0.2)
+      : 'none'};
+  padding: ${(p) => (p.type === 'big' ? '12px 20px' : '8px 16px')};
+  border-radius: 25px;
+  outline: none;
+  cursor: pointer;
+  font-size: ${(p) => p.theme.fontSizesPx[1]};
+  letter-spacing: 0.5px;
+  line-height: 1;
+  transition: 0.075s all ease-in-out;
+
+  svg {
+    width: 100%;
+  }
+
+  &:visited,
+  &:focus,
+  &:active {
+    color: ${(p) => p.theme.colors[p.color || 'button']};
+  }
+
+  &:hover {
+    opacity: 1;
+    color: ${getThemeColor('background')};
+    background-color: ${getThemeColor('button')};
+
+    svg {
+      path,
+      circle,
+      rect,
+      line,
+      polyline {
+        stroke: ${getThemeColor('background')};
+      }
+    }
+
+    svg {
+      .nostroke {
+        stroke: none;
+      }
+    }
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+
+export default ({
+  icon,
+  color = 'button',
+  children,
+  type = 'normal',
+  iconWidth = '20px',
+  ...props
+}) => (
+  <Button color={color} type={type} {...props}>
+    <Flex alignItems="center" justifyContent="center">
+      {icon && (
+        <Icon
+          strokeColor={color}
+          name={icon}
+          colorizeStroke
+          width={iconWidth}
+          mr={1}
+        />
+      )}
+      {children}
+    </Flex>
+  </Button>
+);