From b4394da9005a0fb0fb270bb23524b65a0b39c247 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Fri, 15 Nov 2019 17:26:10 +0700
Subject: [PATCH] Add cover for sticky footer

---
 client/Home.jsx                     | 14 ++++++++++-
 client/covers/StickyFooterCover.jsx | 38 +++++++++++++++++++++++++++++
 client/placeholders/Frame.jsx       |  5 +++-
 client/placeholders/Line.jsx        |  6 +++--
 4 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 client/covers/StickyFooterCover.jsx

diff --git a/client/Home.jsx b/client/Home.jsx
index 70991a8..3213f84 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import CenterCover from './covers/CenterCover';
+import StickyFooterCover from './covers/StickyFooterCover';
 import Layout from './Layout';
 import useDocumentTitle from './useDocumentTitle';
 
@@ -10,7 +11,18 @@ const Home = () => {
 
     return (
         <Layout>
-            <h2 className="f2 lh-copy">Pattern</h2>
+            <h2 className="f2 lh-copy">Layouts</h2>
+
+            <div className="flex flex-wrap justify-between">
+                 <div className="w-30">
+                    <Link to="/centering" className="link flex flex-column items-center justify-center bg-black-05 br2 pa3">
+                        <StickyFooterCover />
+                        <h4 className="f4 mv0 pv3">Sticky footer</h4>
+                    </Link>
+                </div>
+            </div>
+
+            <h2 className="f2 lh-copy">Patterns</h2>
 
             <div className="flex flex-wrap justify-between">
                 <div className="w-30">
diff --git a/client/covers/StickyFooterCover.jsx b/client/covers/StickyFooterCover.jsx
new file mode 100644
index 0000000..57e3409
--- /dev/null
+++ b/client/covers/StickyFooterCover.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import Frame from '../placeholders/Frame';
+import Line from '../placeholders/Line';
+
+const StickyFooterCover = () => {
+    return (
+        <Frame size="medium">
+            <div className="h-100 flex flex-column">
+                <div className="flex-shrink-0">
+                    <div className="w-100 flex items-center pa2">
+                        <div className="w1"><Line /></div>
+                        <div className="w1 ml-auto"><Line /></div>
+                        <div className="w1 ml1"><Line /></div>
+                    </div>
+                    <Line size="medium" />
+                </div>
+                <div className="flex-grow-1">
+                    <div className="pa2">
+                        <div className="w3 mb2"><Line /></div>
+                        <div className="w3 mb2"><Line /></div>
+                        <div className="w2"><Line /></div>
+                    </div>
+                </div>
+                <div className="flex-shrink-0">
+                    <Line size="medium" />
+                    <div className="w-100 flex items-center pa2">
+                        <div className="w1"><Line /></div>
+                        <div className="w1 ml1"><Line /></div>
+                        <div className="w1 ml1"><Line /></div>
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default StickyFooterCover;
diff --git a/client/placeholders/Frame.jsx b/client/placeholders/Frame.jsx
index fb1d17b..545fbb5 100644
--- a/client/placeholders/Frame.jsx
+++ b/client/placeholders/Frame.jsx
@@ -1,10 +1,13 @@
 import React from 'react';
 
-const Frame = ({ children }) => {
+const Frame = ({ children, size }) => {
+    const bw = (size === 'medium' ? '2px' : '1px');
+
     return (
         <div
             className="ba b--black-30 br2"
             style={{
+                borderWidth: bw,
                 height: '100px',
                 width: '100px',
             }}
diff --git a/client/placeholders/Line.jsx b/client/placeholders/Line.jsx
index 7d41c57..1386d8d 100644
--- a/client/placeholders/Line.jsx
+++ b/client/placeholders/Line.jsx
@@ -1,10 +1,12 @@
 import React from 'react';
 
-const Line = () => {
+const Line = ({ size }) => {
+    const h = (size === 'medium' ? '2px' : '1px');
+
     return (
         <div
             className="w-100 bg-black-30"
-            style={{ height: '1px' }}
+            style={{ height: h }}
         />
     );
 };