aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-10 18:52:42 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-10 18:53:01 +0800
commit80811c9ccacc646188821b1b31aeaa017e40e9a0 (patch)
tree5bba0e106b2bfd23e8b40159365c596d4f3df283 /packages/website/ts
parent14d342c3e006191cc86415f3ebf714ef0cfc4ca1 (diff)
downloaddexon-sol-tools-80811c9ccacc646188821b1b31aeaa017e40e9a0.tar
dexon-sol-tools-80811c9ccacc646188821b1b31aeaa017e40e9a0.tar.gz
dexon-sol-tools-80811c9ccacc646188821b1b31aeaa017e40e9a0.tar.bz2
dexon-sol-tools-80811c9ccacc646188821b1b31aeaa017e40e9a0.tar.lz
dexon-sol-tools-80811c9ccacc646188821b1b31aeaa017e40e9a0.tar.xz
dexon-sol-tools-80811c9ccacc646188821b1b31aeaa017e40e9a0.tar.zst
dexon-sol-tools-80811c9ccacc646188821b1b31aeaa017e40e9a0.zip
Async load icons, adds margins
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/@next/components/icon.tsx26
-rw-r--r--packages/website/ts/@next/constants/utilities.tsx2
-rw-r--r--packages/website/ts/@next/pages/landing.tsx9
3 files changed, 27 insertions, 10 deletions
diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx
index 8dfede88c..60e27f07e 100644
--- a/packages/website/ts/@next/components/icon.tsx
+++ b/packages/website/ts/@next/components/icon.tsx
@@ -1,18 +1,19 @@
import * as React from 'react';
+import Loadable from 'react-loadable';
import styled from 'styled-components';
-import IconCoin from 'ts/@next/icons/illustrations/coin.svg';
+import {getCSSPadding} from 'ts/@next/constants/utilities';
-interface Props {
+interface IconProps {
name: string;
+ margin?: Array<'small' | 'default' | 'large' | number> | number;
size?: 'small' | 'medium' | 'large' | number;
}
-const ICONS = {
- coin: IconCoin,
-};
-
export const Icon: React.FunctionComponent<Props> = (props: Props) => {
- const IconSVG = ICONS[props.name];
+ const IconSVG = Loadable({
+ loader: () => import(`ts/@next/icons/illustrations/${props.name}.svg`),
+ loading: () => 'Loading',
+ });
return (
<StyledIcon {...props}>
@@ -21,6 +22,17 @@ export const Icon: React.FunctionComponent<Props> = (props: Props) => {
);
};
+export const InlineIconWrap = styled.div`
+ margin: ${props => getCSSPadding(props.margin)};
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ > figure {
+ margin: 0 5px;
+ }
+`;
+
const _getSize = (size: string | number = 'small'): string => {
if (isNaN(size)) {
return `var(--${size}Icon)`;
diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/@next/constants/utilities.tsx
index 35956c47b..74f121e49 100644
--- a/packages/website/ts/@next/constants/utilities.tsx
+++ b/packages/website/ts/@next/constants/utilities.tsx
@@ -1,5 +1,5 @@
export interface PaddingInterface {
- padding?: number | Array<'large' | 'default' | number>;
+ padding?: number | Array<'large' | 'default', 'small' | number>;
}
interface PaddingSizes {
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index d4ad55b9d..b884c3545 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
import {colors} from 'ts/style/colors';
import {Button, ButtonWrap} from 'ts/@next/components/button';
-import {Icon} from 'ts/@next/components/icon';
+import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
import {SiteWrap} from 'ts/@next/components/siteWrap';
import {Heading, Paragraph} from 'ts/@next/components/text';
@@ -94,7 +94,12 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
<Section bgColor={colors.backgroundDark} isPadLarge={true}>
<WrapCentered width="narrow">
- <Icon name="coin" size="small" />
+ <InlineIconWrap>
+ <Icon name="coin" size="small" />
+ <Icon name="coin" size="small" />
+ <Icon name="coin" size="small" />
+ <Icon name="coin" size="small" />
+ </InlineIconWrap>
<Paragraph
size="large"