Add centering layout

client/App.jsx

@@ -2,12 +2,14 @@ import React from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 import Home from './Home';
+import Centering from './layouts/Centering';
 
 const App = () => {
     return (
         <Router>
             <Switch>
                 <Route exact={true} path='/'><Home /></Route>
+                <Route exact={true} path='/centering'><Centering /></Route>
             </Switch>
         </Router>
     );

client/DetailsLayout.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import Layout from './Layout';
+
+const DetailsLayout = ({ name, children }) => {
+    return (
+        <Layout>
+            <div className="flex items-center mv5 f2">
+                <Link to="/" className="link">Home</Link>
+                <div className="ph2">/</div>
+                <div className="f2">{name}</div>
+            </div>
+
+            <div className="mb5">
+                {children}
+            </div>
+        </Layout>
+    );
+};
+
+export default DetailsLayout;

client/Home.jsx

@@ -11,9 +11,9 @@ const Home = () => {
 
             <div className="flex flex-wrap justify-between">
                 <div className="w-30">
-                    <Link to="/center" className="link flex flex-column items-center justify-center bg-black-05 br2 pa3">
+                    <Link to="/centering" className="link flex flex-column items-center justify-center bg-black-05 br2 pa3">
                         <CenterCover />
-                        <h4 className="f4 mv0 pv3">Center</h4>
+                        <h4 className="f4 mv0 pv3">Centering</h4>
                     </Link>
                 </div>
             </div>

client/layouts/Centering.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import DetailsLayout from '../DetailsLayout';
+import BrowserFrame from '../placeholders/BrowserFrame';
+
+const Centering = () => {
+    return (
+        <DetailsLayout name="Centering">
+            <BrowserFrame>
+                <div className="h-100 flex flex-column items-center justify-center">
+                    <div className="f1 b">CENTER</div>
+                </div>
+            </BrowserFrame>
+        </DetailsLayout>
+    );
+};
+
+export default Centering;

client/placeholders/BrowserFrame.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const BrowserFrame = ({ children }) => {
+    return (
+        <div className="br2 ba b--black-20">
+            <div className="flex pa3 bb b--black-20 items-center">
+                <div className="br-100 mr1 w1 h1 bg-red" />
+                <div className="br-100 mr1 w1 h1 bg-gold" />
+                <div className="br-100 mr1 w1 h1 bg-red" />
+            </div>
+            <div style={{ height: '512px' }}>
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export default BrowserFrame;