From e42cc8eed585d0908f807fee88e980f8ae0f6532 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 12 Jan 2020 10:02:59 +0700
Subject: [PATCH] Add status light pattern

---
 client/constants/Pattern.ts              |   1 +
 client/pages/ExplorePage.tsx             |   1 +
 client/patterns/status-light/Cover.tsx   |  51 +++++++
 client/patterns/status-light/Details.tsx | 171 +++++++++++++++++++++++
 public/sitemap.xml                       |   1 +
 5 files changed, 225 insertions(+)
 create mode 100644 client/patterns/status-light/Cover.tsx
 create mode 100644 client/patterns/status-light/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index cbb701a..3629f7a 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -70,6 +70,7 @@ enum Pattern {
     SplitScreen = 'Split screen',
     StackedCards = 'Stacked cards',
     Statistic = 'Statistic',
+    StatusLight = 'Status light',
     StepperInput = 'Stepper input',
     StickyFooter = 'Sticky footer',
     StickyHeader = 'Sticky header',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index b1cd495..2a56240 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -176,6 +176,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Separator} />
                         <CoverCard pattern={Pattern.StackedCards} />
                         <CoverCard pattern={Pattern.Statistic} />
+                        <CoverCard pattern={Pattern.StatusLight} />
                         <CoverCard pattern={Pattern.StickyTableColumn} />
                         <CoverCard pattern={Pattern.StickyTableHeaders} />
                         <CoverCard pattern={Pattern.Teardrop} />
diff --git a/client/patterns/status-light/Cover.tsx b/client/patterns/status-light/Cover.tsx
new file mode 100644
index 0000000..35e56ab
--- /dev/null
+++ b/client/patterns/status-light/Cover.tsx
@@ -0,0 +1,51 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Rectangle from '../../placeholders/Rectangle';
+
+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',
+                        justifyContent: 'center',
+                        width: '75%',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: '#4299e1',
+                            borderRadius: '9999px',
+                            height: '8px',
+                            marginRight: '8px',
+                            width: '8px',
+                        }}
+                    />
+
+                    <div style={{ flex: 1 }}>
+                        <Rectangle />
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/status-light/Details.tsx b/client/patterns/status-light/Details.tsx
new file mode 100644
index 0000000..deb36ed
--- /dev/null
+++ b/client/patterns/status-light/Details.tsx
@@ -0,0 +1,171 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+import Heading from '../../components/Heading';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Status light">
+            <Helmet>
+                <meta name="description" content="Create a status light with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css status light" />
+            </Helmet>
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'inline-flex',
+                                    width: '150px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        backgroundColor: '#4299e1',
+                                        borderRadius: '9999px',
+                                        height: '8px',
+                                        marginRight: '8px',
+                                        width: '8px',
+                                    }}
+                                />
+
+                                <div style={{ flex: 1 }}>
+                                    <Rectangle />
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Center the content */
+    align-items: center;
+    display: flex;
+">
+    <!-- Status light -->
+    <div style="
+        /* Background color */
+        background-color: rgb(66, 153, 225);
+
+        /* Rounded border */
+        border-radius: 9999px;
+
+        /* Size */
+        height: 8px;
+        width: 8px;
+
+        /* Spacing */
+        margin-right: 8px;
+    "></div>
+
+    <!-- Content -->
+    <div style="
+        /* Take available width */
+        flex: 1;
+    ">
+        ...
+    </div>
+</div>
+`}
+                />
+            </div>
+
+            <section>
+                <Heading title="Use cases" />
+
+                <div style={{ padding: '48px' }}>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            height: '500px',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <div>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    marginBottom: '12px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        backgroundColor: '#f56565',
+                                        borderRadius: '9999px',
+                                        height: '8px',
+                                        marginRight: '8px',
+                                        width: '8px',
+                                    }}
+                                />
+
+                                In review
+                            </div>
+
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    marginBottom: '12px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        backgroundColor: '#a0aec0',
+                                        borderRadius: '9999px',
+                                        height: '8px',
+                                        marginRight: '8px',
+                                        width: '8px',
+                                    }}
+                                />
+
+                                Draft
+                            </div>
+
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        backgroundColor: '#4299e1',
+                                        borderRadius: '9999px',
+                                        height: '8px',
+                                        marginRight: '8px',
+                                        width: '8px',
+                                    }}
+                                />
+
+                                Published
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index f2d9488..9d7b0bd 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -66,6 +66,7 @@
     <url><loc>https://csslayout.io/patterns/split-screen</loc></url>
     <url><loc>https://csslayout.io/patterns/stacked-cards</loc></url>
     <url><loc>https://csslayout.io/patterns/statistic</loc></url>
+    <url><loc>https://csslayout.io/patterns/status-light</loc></url>
     <url><loc>https://csslayout.io/patterns/stepper-input</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-header</loc></url>