Moves content wrap to layout.tsx

2 files changed, 27 insertions, 19 deletions

diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 55a3dcbee..58b308883 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -2,29 +2,29 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 interface WrapWidths {
-  default: string;
-  full: string;
-  medium: string;
-  narrow: string;
-  [key: string]: string;
+  default: string,
+  full: string,
+  medium: string,
+  narrow: string,
+  [key: string]: string,
 }
 
 interface ColumnWidths {
-  [key: string]: string;
+  [key: string]: string,
 }
 
 interface SectionProps {
-  noPadding?: any;
-  bgColor?: string;
+  noPadding?: any,
+  bgColor?: string,
 }
 
 interface WrapProps {
-  width?: 'default' | 'full' | 'medium' | 'narrow';
-  bgColor?: string;
+  width?: 'default' | 'full' | 'medium' | 'narrow',
+  bgColor?: string,
 }
 
 interface ColumnProps {
-  colWidth?: '1/4' | '1/3' | '1/2' | '2/3';
+  colWidth?: '1/4' | '1/3' | '1/2' | '2/3',
 }
 
 interface GetColWidthArgs {
@@ -41,8 +41,9 @@ const _getColumnWidth = (args: GetColWidthArgs) => {
 };
 
 const GUTTER = 30 as number;
+const MAX_WIDTH = 1500;
 const WRAPPER_WIDTHS: WrapWidths = {
-  default: '1500px', // tbd
+  default: `${MAX_WIDTH}px`, // tbd
   full: '100%',
   medium: '1136px',
   narrow: '930px',
@@ -55,6 +56,13 @@ const COLUMN_WIDTHS: ColumnWidths = {
 };
 
 
+export const Main = styled.main`
+  border: 1px solid blue;
+  width: calc(100% - 60px);
+  max-width: ${MAX_WIDTH}px;
+  margin: 0 auto;
+`;
+
 export const Section = styled.section<SectionProps>`
   width: 100%;
   padding: ${props => !props.noPadding && '30px'};
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index c71fcf9cb..828842064 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -3,8 +3,11 @@ import styled from 'styled-components';
 
 import { Footer } from 'ts/@next/components/footer';
 import { Header } from 'ts/@next/components/header';
+import { Main } from 'ts/@next/components/layout';
 import { GlobalStyles } from 'ts/@next/constants/globalStyle';
 
+// Note(ez): We'll define the theme and provide it via a prop
+// e.g. theme dark/light/etc.
 interface Props {
 
 }
@@ -14,12 +17,15 @@ const SiteWrap: React.StatelessComponent<Props> = props => {
 
   return (
     <>
+      {/* GlobalStyles will be exposed the theme via provider,
+          same is true for all children of SiteWrap
+      */}
       <GlobalStyles />
 
       <Header />
 
       <Main>
-        {children}
+        { children }
       </Main>
 
       <Footer/>
@@ -27,11 +33,5 @@ const SiteWrap: React.StatelessComponent<Props> = props => {
   );
 };
 
-const Main = styled.main`
-  border: 1px solid blue;
-  width: calc(100% - 60px);
-  max-width: 1500px;
-  margin: 0 auto;
-`;
 
 export { SiteWrap };