From 912957405bd2c90e7a6f3e07ced9cd0d8163cc78 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Fri, 22 Nov 2019 19:16:27 +0700
Subject: [PATCH] Add dot navigation

---
 client/App.jsx                            |  2 +
 client/Home.jsx                           |  7 ++
 client/layouts/dot-navigation/Cover.jsx   | 20 ++++++
 client/layouts/dot-navigation/Details.jsx | 78 +++++++++++++++++++++++
 4 files changed, 107 insertions(+)
 create mode 100644 client/layouts/dot-navigation/Cover.jsx
 create mode 100644 client/layouts/dot-navigation/Details.jsx

diff --git a/client/App.jsx b/client/App.jsx
index 5683529..41ba1f1 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -9,6 +9,7 @@ import Breadcrumb from './layouts/breadcrumb/Details';
 import ButtonWithIcon from './layouts/button-with-icon/Details';
 import Card from './layouts/card/Details';
 import Centering from './layouts/centering/Details';
+import DotNavigation from './layouts/dot-navigation/Details';
 import FeatureList from './layouts/feature-list/Details';
 import FixedAtCorner from './layouts/fixed-at-corner/Details';
 import HolyGrail from './layouts/holy-grail/Details';
@@ -45,6 +46,7 @@ const App = () => {
                 <Route exact={true} path='/button-with-icon'><ButtonWithIcon /></Route>
                 <Route exact={true} path='/card'><Card /></Route>
                 <Route exact={true} path='/centering'><Centering /></Route>
+                <Route exact={true} path='/dot-navigation'><DotNavigation /></Route>
                 <Route exact={true} path='/feature-list'><FeatureList /></Route>
                 <Route exact={true} path='/fixed-at-corner'><FixedAtCorner /></Route>
                 <Route exact={true} path='/holy-grail'><HolyGrail /></Route>
diff --git a/client/Home.jsx b/client/Home.jsx
index 7ba61d7..e4cfbca 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -6,6 +6,7 @@ import BreadcrumbCover from './layouts/breadcrumb/Cover';
 import ButtonWithIconCover from './layouts/button-with-icon/Cover';
 import CardCover from './layouts/card/Cover';
 import CenterCover from './layouts/centering/Cover';
+import DotNavigationCover from './layouts/dot-navigation/Cover';
 import FeatureListCover from './layouts/feature-list/Cover';
 import FixedAtCornerCover from './layouts/fixed-at-corner/Cover';
 import HolyGrailCover from './layouts/holy-grail/Cover';
@@ -142,6 +143,12 @@ const Home = () => {
                                 <h4 className="f5 mv0 pt3">Centering</h4>
                             </Link>
                         </div>
+                        <div className="pa1 w-20">
+                            <Link to="/dot-navigation" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <DotNavigationCover />
+                                <h4 className="f5 mv0 pt3">Dot navigation</h4>
+                            </Link>
+                        </div>
                         <div className="pa1 w-20">
                             <Link to="/feature-list" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                                 <FeatureListCover />
diff --git a/client/layouts/dot-navigation/Cover.jsx b/client/layouts/dot-navigation/Cover.jsx
new file mode 100644
index 0000000..a9ed22e
--- /dev/null
+++ b/client/layouts/dot-navigation/Cover.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex flex-column items-center justify-center">
+                <div className="flex items-center">
+                    <div className="mh1 br-pill ba b--black-30" style={{ height: '8px', width: '8px' }} />
+                    <div className="mh1 br-pill bg-black-30" style={{ height: '8px', width: '8px' }} />
+                    <div className="mh1 br-pill ba b--black-30" style={{ height: '8px', width: '8px' }} />
+                    <div className="mh1 br-pill ba b--black-30" style={{ height: '8px', width: '8px' }} />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/layouts/dot-navigation/Details.jsx b/client/layouts/dot-navigation/Details.jsx
new file mode 100644
index 0000000..d2cc91c
--- /dev/null
+++ b/client/layouts/dot-navigation/Details.jsx
@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+
+import DetailsLayout from '../../DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import SampleCode from '../../SampleCode';
+
+const Details = () => {
+    const [activeItem, setActiveItem] = useState(0);
+
+    const Dot = ({ index }) => {
+        const isActive = index === activeItem;
+        const click = () => setActiveItem(index);
+        return (
+            <li
+                className={`pointer mh1 br-pill ${isActive ? 'bg-black-30' : 'ba b--black-30'}`}
+                style={{
+                    height: '12px',
+                    width: '12px',
+                }}
+                onClick={click}
+            />
+        );
+    };
+
+    return (
+        <DetailsLayout title="Dot navigation">
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex flex-column items-center justify-center">
+                        <ul className="list ma0 pa0 flex items-center justify-center">
+                            <Dot index={0} />
+                            <Dot index={1} />
+                            <Dot index={2} />
+                            <Dot index={3} />
+                        </ul>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<ul style="
+    /* Content is centered */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Reset styles */
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+">
+    <li style="
+        /* Rounded border */
+        border-radius: 9999px;
+        height: 12px;
+        width: 12px;
+
+        /* Active dot */
+        background-color: rgba(0, 0, 0, .3);
+
+        /* Inactive dot */
+        background-color: transparent;
+        border: 1px solid rgba(0, 0, 0, .3);
+
+        /* OPTIONAL: Spacing between dots */
+        margin: 0 4px;
+    " />
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Details;