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,103 @@
+import React, { useState, useEffect } from 'react';
+import styled from '@emotion/styled';
+import { Flex } from 'reflexbox';
+import { isOldIE } from 'utils/browser-utils';
+
+import Mail from 'assets/icons/mail.svg';
+import Github from 'assets/icons/github_circle.svg';
+import ArrowRight from 'assets/icons/arrow_right.svg';
+import Menu from 'assets/icons/menu.svg';
+import Code from 'assets/icons/code.svg';
+
+const IconWrapper = styled(Flex)`
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    max-width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    path,
+    circle,
+    rect,
+    line,
+    polyline {
+      stroke: ${(p) =>
+        p.colorizeStroke
+          ? p.theme.colors[p.strokeColor] || p.theme.colors.text
+          : 'none'};
+    }
+
+    path.nostroke,
+    circle.nostroke,
+    rect.nostroke,
+    line.nostroke,
+    polyline.nostroke {
+      stroke: none;
+      fill: ${(p) =>
+        p.colorizeStroke
+          ? p.theme.colors[p.strokeColor] || p.theme.colors.text
+          : 'none'};
+    }
+  }
+`;
+
+const preLoaded = {
+  mail: Mail,
+  arrow_right: ArrowRight,
+  menu: Menu,
+  github_circle: Github,
+  code: Code,
+};
+
+const getPreLoadedIcon = (name) =>
+  preLoaded[name] ? () => preLoaded[name] : null;
+
+export default ({
+  name = 'datavis',
+  colorizeStroke = false,
+  strokeColor = null,
+  ...restProps
+}) => {
+  const [SVGComponent, setSVGComponent] = useState(getPreLoadedIcon(name));
+
+  useEffect(() => {
+    if (!SVGComponent) {
+      (async () => {
+        try {
+          const svgComp = await import(`assets/icons/${name}.svg`);
+          setSVGComponent(svgComp);
+        } catch (err) {
+          console.warn(`error loading icon: ${name}`);
+        }
+      })();
+    }
+  }, [SVGComponent, name]);
+
+  if (!SVGComponent) {
+    return null;
+  }
+
+  const IconComponent = SVGComponent.default
+    ? SVGComponent.default
+    : SVGComponent;
+
+  if (isOldIE()) {
+    return null;
+  }
+
+  return (
+    <IconWrapper
+      className="icon"
+      colorizeStroke={colorizeStroke}
+      strokeColor={strokeColor}
+      height={restProps.width || 'auto'}
+      {...restProps}
+    >
+      <IconComponent />
+    </IconWrapper>
+  );
+};