From 9c2641ef154e82e2b7c473bc702ebeba1ed79030 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Wed, 21 Sep 2022 15:25:08 +0700
Subject: [PATCH] feat: Dot navigation

---
 contents/_includes/covers/dot-navigation.njk |   7 ++
 contents/dot-navigation.md                   |  54 +++++++++
 contents/index.njk                           |   1 +
 pages/dot-navigation/index.tsx               | 113 -------------------
 patterns/dot-navigation/Cover.tsx            |  61 ----------
 styles/index.scss                            |   1 +
 styles/patterns/_dot-navigation.scss         |  29 +++++
 7 files changed, 92 insertions(+), 174 deletions(-)
 create mode 100644 contents/_includes/covers/dot-navigation.njk
 create mode 100644 contents/dot-navigation.md
 delete mode 100644 pages/dot-navigation/index.tsx
 delete mode 100644 patterns/dot-navigation/Cover.tsx
 create mode 100644 styles/patterns/_dot-navigation.scss

diff --git a/contents/_includes/covers/dot-navigation.njk b/contents/_includes/covers/dot-navigation.njk
new file mode 100644
index 0000000..b881dd2
--- /dev/null
+++ b/contents/_includes/covers/dot-navigation.njk
@@ -0,0 +1,7 @@
+<div class="dot-navigation">
+    <div class="dot-navigation__item"></div>
+    <div class="dot-navigation__item dot-navigation__item--active"></div>
+    <div class="dot-navigation__item"></div>
+    <div class="dot-navigation__item"></div>
+    <div class="dot-navigation__item"></div>
+</div>
diff --git a/contents/dot-navigation.md b/contents/dot-navigation.md
new file mode 100644
index 0000000..b935dfb
--- /dev/null
+++ b/contents/dot-navigation.md
@@ -0,0 +1,54 @@
+---
+layout: layouts/post.njk
+title: Dot navigation
+description: Create dot navigation with CSS flexbox
+keywords: css dot navigation, css flexbox
+---
+
+## HTML
+
+```html
+<div class="dot-navigation">
+    <div class="dot-navigation__item"></div>
+
+    <!-- Repeat other dots -->
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.dot-navigation {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Reset styles */
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.dot-navigation__item {
+    /* Rounded border */
+    border-radius: 9999px;
+    height: 0.75rem;
+    width: 0.75rem;
+
+    /* Inactive dot */
+    background-color: transparent;
+    border: 1px solid #d1d5db;
+
+    /* OPTIONAL: Spacing between dots */
+    margin: 0 0.25rem;
+}
+
+/* Active dot */
+.dot-navigation__item--active {
+    background-color: #d1d5db;
+}
+```
+
+{% demo %}{% include "covers/dot-navigation.njk" %}{% enddemo %}
diff --git a/contents/index.njk b/contents/index.njk
index 74e4140..847eae1 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -127,6 +127,7 @@ eleventyExcludeFromCollections: true
         <div class="category__posts">
             {% pattern "Breadcrumb" %}{% include "covers/breadcrumb.njk" %}{% endpattern %}
             {% pattern "Circular navigation" %}{% include "covers/circular-navigation.njk" %}{% endpattern %}
+            {% pattern "Dot navigation" %}{% include "covers/dot-navigation.njk" %}{% endpattern %}
         </div>
     </div>
 
diff --git a/pages/dot-navigation/index.tsx b/pages/dot-navigation/index.tsx
deleted file mode 100644
index 40cecf1..0000000
--- a/pages/dot-navigation/index.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-interface DotProps {
-    index: number;
-}
-
-const Details: React.FC<{}> = () => {
-    const [activeItem, setActiveItem] = React.useState(0);
-
-    const Dot: React.FC<DotProps> = ({ index }) => {
-        const isActive = index === activeItem;
-        const click = () => setActiveItem(index);
-        return (
-            <li
-                style={{
-                    backgroundColor: isActive ? '#d1d5db' : '',
-                    border: isActive ? 'none' : '1px solid #d1d5db',
-                    borderRadius: '9999px',
-                    cursor: 'pointer',
-                    height: '12px',
-                    margin: '0 4px',
-                    width: '12px',
-                }}
-                onClick={click}
-            />
-        );
-    };
-
-    return (
-        <PatternLayout pattern={Pattern.DotNavigation}>
-            <Head>
-                <meta name="description" content="Create dot navigation with CSS flexbox" />
-                <meta name="og:description" content="Create dot navigation with CSS flexbox" />
-                <meta name="twitter:description" content="Create dot navigation with CSS flexbox" />
-                <meta name="keywords" content="css dot navigation, css flexbox" />
-            </Head>
-            <BrowserFrame
-                html={`
-<ul class="dots">
-    <li class="dots__item"></li>
-
-    <!-- Repeat other dots -->
-    ...
-</div>
-`}
-                css={`
-                    .dots {
-                        /* Center the content */
-                        align-items: center;
-                        display: flex;
-                        justify-content: center;
-
-                        /* Reset styles */
-                        list-style-type: none;
-                        margin: 0;
-                        padding: 0;
-                    }
-
-                    .dots__item {
-                        /* Rounded border */
-                        border-radius: 9999px;
-                        height: 12px;
-                        width: 12px;
-
-                        /* Active dot */
-                        background-color: #d1d5db;
-
-                        /* Inactive dot */
-                        background-color: transparent;
-                        border: 1px solid #d1d5db;
-
-                        /* OPTIONAL: Spacing between dots */
-                        margin: 0 4px;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <ul
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            justifyContent: 'center',
-                            listStyleType: 'none',
-                            margin: 0,
-                            padding: 0,
-                        }}
-                    >
-                        <Dot index={0} />
-                        <Dot index={1} />
-                        <Dot index={2} />
-                        <Dot index={3} />
-                    </ul>
-                </div>
-            </BrowserFrame>
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/dot-navigation/Cover.tsx b/patterns/dot-navigation/Cover.tsx
deleted file mode 100644
index 6bd3110..0000000
--- a/patterns/dot-navigation/Cover.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                }}
-            >
-                <div style={{ alignItems: 'center', display: 'flex' }}>
-                    <div
-                        style={{
-                            border: '1px solid #d1d5db',
-                            borderRadius: '9999px',
-                            height: '8px',
-                            margin: '0 4px',
-                            width: '8px',
-                        }}
-                    />
-                    <div
-                        style={{
-                            backgroundColor: '#d1d5db',
-                            borderRadius: '9999px',
-                            height: '8px',
-                            margin: '0 4px',
-                            width: '8px',
-                        }}
-                    />
-                    <div
-                        style={{
-                            border: '1px solid #d1d5db',
-                            borderRadius: '9999px',
-                            height: '8px',
-                            margin: '0 4px',
-                            width: '8px',
-                        }}
-                    />
-                    <div
-                        style={{
-                            border: '1px solid #d1d5db',
-                            borderRadius: '9999px',
-                            height: '8px',
-                            margin: '0 4px',
-                            width: '8px',
-                        }}
-                    />
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index c21bc79..ac167ec 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -34,6 +34,7 @@
 @import './patterns/diagonal-section';
 @import './patterns/docked-at-corner';
 @import './patterns/dot-leader';
+@import './patterns/dot-navigation';
 @import './patterns/drop-area';
 @import './patterns/drop-cap';
 @import './patterns/fading-long-section';
diff --git a/styles/patterns/_dot-navigation.scss b/styles/patterns/_dot-navigation.scss
new file mode 100644
index 0000000..5a02ecd
--- /dev/null
+++ b/styles/patterns/_dot-navigation.scss
@@ -0,0 +1,29 @@
+.dot-navigation {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Reset styles */
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.dot-navigation__item {
+    /* Rounded border */
+    border-radius: 9999px;
+    height: 0.75rem;
+    width: 0.75rem;
+
+    /* Inactive dot */
+    background-color: transparent;
+    border: 1px solid #d1d5db;
+
+    /* OPTIONAL: Spacing between dots */
+    margin: 0 0.25rem;
+}
+
+.dot-navigation__item--active {
+    background-color: #d1d5db;
+}