From 57517c5947a532fee07ead8e065cddc04d4ed835 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Tue, 20 Sep 2022 17:43:16 +0700
Subject: [PATCH] feat: Progress bar

---
 contents/_includes/patterns/progress-bar.njk |   3 +
 contents/index.njk                           |   3 +-
 contents/progress-bar.md                     |  49 +++++++++
 pages/progress-bar/index.tsx                 | 100 -------------------
 patterns/progress-bar/Cover.tsx              |  41 --------
 styles/index.scss                            |   1 +
 styles/patterns/_progress-bar.scss           |  27 +++++
 7 files changed, 82 insertions(+), 142 deletions(-)
 create mode 100644 contents/_includes/patterns/progress-bar.njk
 create mode 100644 contents/progress-bar.md
 delete mode 100644 pages/progress-bar/index.tsx
 delete mode 100644 patterns/progress-bar/Cover.tsx
 create mode 100644 styles/patterns/_progress-bar.scss

diff --git a/contents/_includes/patterns/progress-bar.njk b/contents/_includes/patterns/progress-bar.njk
new file mode 100644
index 0000000..ae5be01
--- /dev/null
+++ b/contents/_includes/patterns/progress-bar.njk
@@ -0,0 +1,3 @@
+<div class="progress-bar">
+    <div class="progress-bar__progress">40%</div>
+</div>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index aca6c0c..b68b9f0 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -64,7 +64,7 @@ eleventyExcludeFromCollections: true
             {% pattern "Triangle buttons" %}{% include "patterns/triangle-buttons.njk" %}{% endpattern %}
             {% pattern "Video background" %}{% include "patterns/video-background.njk" %}{% endpattern %}
             {% pattern "Voting" %}{% include "patterns/voting.njk" %}{% endpattern %}
-            {% pattern "Watermark" %}{% include "patterns/Watermark.njk" %}{% endpattern %}
+            {% pattern "Watermark" %}{% include "patterns/watermark.njk" %}{% endpattern %}
             {% pattern "Zigzag timeline" %}{% include "patterns/zigzag-timeline.njk" %}{% endpattern %}
         </div>
     </div>
@@ -73,6 +73,7 @@ eleventyExcludeFromCollections: true
         <h2 class="category__name">Feedback</h2>
         <div class="category__posts">
             {% pattern "Popover arrow" %}{% include "patterns/popover-arrow.njk" %}{% endpattern %}
+            {% pattern "Progress bar" %}{% include "patterns/progress-bar.njk" %}{% endpattern %}
         </div>
     </div>
 
diff --git a/contents/progress-bar.md b/contents/progress-bar.md
new file mode 100644
index 0000000..1c8f99d
--- /dev/null
+++ b/contents/progress-bar.md
@@ -0,0 +1,49 @@
+---
+layout: layouts/post.njk
+title: Progress bar
+description: Create a progress bar with CSS flexbox
+keywords: css flexbox, css progress bar
+---
+
+## HTML
+
+```html
+<div class="container">
+    <!-- Width based on the number of percentages -->
+    <div class="container__progress" style="width: 40%;">
+        <!-- The number of percentages -->
+        40%
+    </div>
+</div>
+```
+
+## CSS
+
+```css
+.progress-bar {
+    /* Colors */
+    background-color: #d1d5db;
+
+    /* Rounded border */
+    border-radius: 9999px;
+    padding: 0.25rem;
+}
+
+.progress-bar__progress {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Colors */
+    background-color: #3b82f6;
+    color: #fff;
+
+    /* Rounded border */
+    border-radius: 9999px;
+}
+```
+
+{% demo %}
+{% include "patterns/progress-bar.njk" %}
+{% enddemo %}
diff --git a/pages/progress-bar/index.tsx b/pages/progress-bar/index.tsx
deleted file mode 100644
index 378cc61..0000000
--- a/pages/progress-bar/index.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
-
-import useInterval from '../../hooks/useInterval';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    const [progress, setProgress] = React.useState(0);
-    useInterval(() => {
-        setProgress((v) => (v === 100 ? 0 : v + 1));
-    }, 1 * 100);
-
-    return (
-        <PatternLayout pattern={Pattern.ProgressBar}>
-            <Head>
-                <meta name="description" content="Create a progress bar with CSS flexbox" />
-                <meta name="og:description" content="Create a progress bar with CSS flexbox" />
-                <meta name="twitter:description" content="Create a progress bar with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css progress bar" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="container">
-    <div class="container__progress" style="
-        /* Width based on the number of percentages */
-        width: 40%;
-    ">
-        <!-- The number of percentages -->
-        40%
-    </div>
-</div>
-`}
-                css={`
-                    .container {
-                        /* Colors */
-                        background-color: rgba(0, 0, 0, 0.1);
-
-                        /* Rounded border */
-                        border-radius: 9999px;
-                    }
-
-                    .container__progress {
-                        /* Center the content */
-                        align-items: center;
-                        display: flex;
-                        justify-content: center;
-
-                        /* Colors */
-                        background-color: #357edd;
-                        color: #fff;
-
-                        /* Rounded border */
-                        border-radius: 9999px;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div
-                        style={{
-                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                            borderRadius: '9999px',
-                            height: '16px',
-                            width: '50%',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                backgroundColor: '#357EDD',
-                                borderRadius: '9999px',
-                                color: '#FFF',
-                                display: 'flex',
-                                fontSize: '12px',
-                                height: '100%',
-                                justifyContent: 'center',
-                                padding: '4px',
-                                width: `${progress}%`,
-                            }}
-                        >
-                            {progress}%
-                        </div>
-                    </div>
-                </div>
-            </BrowserFrame>
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/progress-bar/Cover.tsx b/patterns/progress-bar/Cover.tsx
deleted file mode 100644
index 8413d96..0000000
--- a/patterns/progress-bar/Cover.tsx
+++ /dev/null
@@ -1,41 +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={{
-                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                        borderRadius: '9999px',
-                        height: '16px',
-                        padding: '4px',
-                        width: '100%',
-                    }}
-                >
-                    <div
-                        style={{
-                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                            borderRadius: '9999px',
-                            height: '100%',
-                            width: '40%',
-                        }}
-                    />
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 25fa341..bfc184c 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -46,6 +46,7 @@
 @import './patterns/popover-arrow';
 @import './patterns/price-tag';
 @import './patterns/pricing-table';
+@import './patterns/progress-bar';
 @import './patterns/property-list';
 @import './patterns/questions-and-answers';
 @import './patterns/ribbon';
diff --git a/styles/patterns/_progress-bar.scss b/styles/patterns/_progress-bar.scss
new file mode 100644
index 0000000..04f8be1
--- /dev/null
+++ b/styles/patterns/_progress-bar.scss
@@ -0,0 +1,27 @@
+.progress-bar {
+    /* Colors */
+    background-color: #d1d5db;
+
+    /* Rounded border */
+    border-radius: 9999px;
+    padding: 0.25rem;
+
+    /* Demo */
+    width: 100%;
+}
+
+.progress-bar__progress {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Colors */
+    background-color: #3b82f6;
+    color: #fff;
+
+    /* Rounded border */
+    border-radius: 9999px;
+
+    width: 40%;
+}
\ No newline at end of file