From 5172ecab86f822b7f6a2145178de2bcc824fedd9 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sat, 16 Nov 2019 12:05:26 +0700
Subject: [PATCH] Use placeholder for sticky footer

---
 client/layouts/StickyFooter.jsx   | 14 ++++++++------
 client/placeholders/Rectangle.jsx |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/client/layouts/StickyFooter.jsx b/client/layouts/StickyFooter.jsx
index eb6e565..fcd2014 100644
--- a/client/layouts/StickyFooter.jsx
+++ b/client/layouts/StickyFooter.jsx
@@ -1,7 +1,9 @@
 import React from 'react';
 
 import DetailsLayout from '../DetailsLayout';
+import Block from '../placeholders/Block';
 import BrowserFrame from '../placeholders/BrowserFrame';
+import Rectangle from '../placeholders/Rectangle';
 import SampleCode from '../SampleCode';
 import useDocumentTitle from '../useDocumentTitle';
 
@@ -16,15 +18,15 @@ const StickyFooter = () => {
             </div>
             <BrowserFrame
                 content={
-                    <div className="h-100 flex flex-column ba b--black-30 bw1">
-                        <div className="flex-shrink-0 bb b--black-30 bw1 pa3">
-                            Header
+                    <div className="h-100 flex flex-column">
+                        <div className="flex-shrink-0 bb b--black-30 pa3">
+                            <div className="w-50"><Rectangle /></div>
                         </div>
                         <div className="flex-grow-1 pa3">
-                            Content
+                            <Block numberOfBlocks={20} />
                         </div>
-                        <div className="flex-shrink-0 bt b--black-30 bw1 pa3">
-                            Footer
+                        <div className="flex-shrink-0 bt b--black-30 pa3">
+                        <div className="w-40"><Rectangle /></div>
                         </div>
                     </div>
                 }
diff --git a/client/placeholders/Rectangle.jsx b/client/placeholders/Rectangle.jsx
index 6b3ba59..933cd6e 100644
--- a/client/placeholders/Rectangle.jsx
+++ b/client/placeholders/Rectangle.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Rectangle = ({ height }) => {
+const Rectangle = ({ height = 8 }) => {
     return (
         <div
             className="w-100 bg-black-30 br-pill"