From 3b152460488bc00eb107e510378609edcb42c363 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sat, 16 Nov 2019 17:07:58 +0700
Subject: [PATCH] Add stepper cover

---
 client/Home.jsx                      |  7 +++++++
 client/covers/StepperCover.jsx       | 19 +++++++++++++++++++
 client/placeholders/VerticalLine.jsx | 12 ++++++++++++
 3 files changed, 38 insertions(+)
 create mode 100644 client/covers/StepperCover.jsx
 create mode 100644 client/placeholders/VerticalLine.jsx

diff --git a/client/Home.jsx b/client/Home.jsx
index 7659b39..0ee77a9 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -6,6 +6,7 @@ import CenterCover from './covers/CenterCover';
 import SidebarCover from './covers/SidebarCover';
 import StickyFooterCover from './covers/StickyFooterCover';
 import StickyHeaderCover from './covers/StickyHeaderCover';
+import StepperCover from './covers/StepperCover';
 import Layout from './Layout';
 import useDocumentTitle from './useDocumentTitle';
 
@@ -67,6 +68,12 @@ const Home = () => {
                             <h4 className="f4 mv0 pt3">Centering</h4>
                         </Link>
                     </div>
+                    <div className="pa2 w-20">
+                        <Link to="/stepper" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                            <StepperCover />
+                            <h4 className="f4 mv0 pt3">Stepper</h4>
+                        </Link>
+                    </div>
                 </div>
             </div>
         </Layout>
diff --git a/client/covers/StepperCover.jsx b/client/covers/StepperCover.jsx
new file mode 100644
index 0000000..c0ad80d
--- /dev/null
+++ b/client/covers/StepperCover.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import Frame from '../placeholders/Frame';
+
+const StepperCover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex items-center justify-center pa2">
+                <div className="b--black-30 ba br2 flex w-100">
+                    <div className="w-20 br b--black-30 tc">-</div>
+                    <div className="flex-grow-1 bg-white"></div>
+                    <div className="w-20 bl b--black-30 tc">+</div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default StepperCover;
diff --git a/client/placeholders/VerticalLine.jsx b/client/placeholders/VerticalLine.jsx
new file mode 100644
index 0000000..e098ed8
--- /dev/null
+++ b/client/placeholders/VerticalLine.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const VerticalLine = () => {
+    return (
+        <div
+            className="h-100 bg-black-30"
+            style={{ width: '1px' }}
+        />
+    );
+};
+
+export default VerticalLine;