aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components/layout.tsx
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-29 00:27:05 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-29 00:29:12 +0800
commit38e12c240573dc7da0143809b29864bfa07a6c63 (patch)
tree290bf5ee70be7af76db946f626f9eb365823f588 /packages/website/ts/@next/components/layout.tsx
parentf9a7cc94e1af962ac16f87d5300047158428279e (diff)
downloaddexon-sol-tools-38e12c240573dc7da0143809b29864bfa07a6c63.tar
dexon-sol-tools-38e12c240573dc7da0143809b29864bfa07a6c63.tar.gz
dexon-sol-tools-38e12c240573dc7da0143809b29864bfa07a6c63.tar.bz2
dexon-sol-tools-38e12c240573dc7da0143809b29864bfa07a6c63.tar.lz
dexon-sol-tools-38e12c240573dc7da0143809b29864bfa07a6c63.tar.xz
dexon-sol-tools-38e12c240573dc7da0143809b29864bfa07a6c63.tar.zst
dexon-sol-tools-38e12c240573dc7da0143809b29864bfa07a6c63.zip
[WIP] Proposed layout modules
Diffstat (limited to 'packages/website/ts/@next/components/layout.tsx')
-rw-r--r--packages/website/ts/@next/components/layout.tsx64
1 files changed, 64 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
new file mode 100644
index 000000000..c5b816f9d
--- /dev/null
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+interface WrapWidths {
+ default: string,
+ full: string,
+ medium: string,
+ narrow: string,
+ [key: string]: string,
+}
+
+interface ColumnWidths {
+ [key: string]: string,
+}
+
+interface SectionProps {
+ noPadding?: any,
+ bgColor?: string,
+}
+
+interface WrapProps {
+ width?: 'default' | 'full' | 'medium' | 'narrow',
+ bgColor?: string,
+}
+
+interface ColumnProps {
+ colWidth?: '1/4' | '1/3' | '1/2' | '2/3',
+}
+
+const GUTTER = 30 as number;
+const WRAPPER_WIDTHS: WrapWidths = {
+ default: `calc(100% - ${GUTTER * 2}px)`,
+ full: '100%',
+ medium: '1136px',
+ narrow: '930px',
+};
+const COLUMN_WIDTHS: ColumnWidths = {
+ '1/4': `calc(${(1 / 4) * 100}% - ${(GUTTER * 3) / 4}px)`,
+ '1/3': `calc(${(1 / 3) * 100}% - ${(GUTTER * 2) / 3}px)`,
+ '1/2': `calc(${(1 / 2) * 100}% - ${GUTTER / 2}px)`,
+ '2/3': `calc(${(2 / 3) * 100}% - ${GUTTER / 2}px)`,
+};
+
+export const Section = styled.section<SectionProps>`
+ width: 100%;
+ padding: ${props => !props.noPadding && '30px'};
+ background-color: ${props => props.bgColor};
+ border: 1px solid blue;
+`;
+
+export const Wrap = styled.div<WrapProps>`
+ max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
+ background-color: ${props => props.bgColor};
+ margin: 0 auto;
+ border: 1px solid green;
+ display: flex;
+ justify-content: space-between;
+`;
+
+export const Column = styled.div<ColumnProps>`
+ width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
+ padding: 30px;
+ border: 1px solid yellow;
+`;