Thomasroest/basic layout component

client/components/Layout/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { StyledLayout, StyledMain } from './styles';
+import MainHeader from '../MainHeader';
+import MainFooter from '../MainFooter';
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+const Layout = ({ children }: IProps) => {
+  return (
+    <StyledLayout>
+      <MainHeader />
+      <StyledMain>{children}</StyledMain>
+      <MainFooter />
+    </StyledLayout>
+  );
+};
+
+export default Layout;

client/components/Layout/styles.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const StyledLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+`;
+
+export const StyledMain = styled.main`
+  flex: 1;
+`;

client/components/MainFooter/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const MainFooter = () => {
+  return <footer>Footer</footer>;
+};
+
+export default MainFooter;

client/components/MainHeader/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { AppBar, Toolbar } from '@material-ui/core';
+import { Logo } from './styles';
+
+const MainHeader = () => {
+  return (
+    <AppBar position="relative" color="primary">
+      <Toolbar>
+        <Logo>Chapter</Logo>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default MainHeader;

client/components/MainHeader/styles.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Logo = styled.span`
+  font-size: 1.5rem;
+`;

client/components/SomeComponent/__test__/Index.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { ThemeProvider } from 'styled-components';
-import { SomeComponent } from 'client/components';
+import SomeComponent from 'client/components/SomeComponent';
 import { themeObject } from 'styles/theme';
 
 describe('SomeComponent', () => {

pages/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { SomeComponent } from 'client/components';
+import Layout from 'client/components/Layout';
+import SomeComponent from 'client/components/SomeComponent';
 
 const Index = () => {
   return (
-    <div>
+    <Layout>
       <SomeComponent />
-    </div>
+    </Layout>
   );
 };