Merge pull request #8 from phuoc-ng/badge

Add Badge pattern

client/App.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 import Home from './Home';
+import Badge from './layouts/Badge';
 import Centering from './layouts/Centering';
 import Sidebar from './layouts/Sidebar';
 import StickyFooter from './layouts/StickyFooter';
@@ -12,6 +13,7 @@ const App = () => {
         <Router>
             <Switch>
                 <Route exact={true} path='/'><Home /></Route>
+                <Route exact={true} path='/badge'><Badge /></Route>
                 <Route exact={true} path='/centering'><Centering /></Route>
                 <Route exact={true} path='/sidebar'><Sidebar /></Route>
                 <Route exact={true} path='/sticky-footer'><StickyFooter /></Route>

client/Home.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import BadgeCover from './covers/BadgeCover';
 import CenterCover from './covers/CenterCover';
 import SidebarCover from './covers/SidebarCover';
 import StickyFooterCover from './covers/StickyFooterCover';
@@ -54,6 +55,12 @@ const Home = () => {
                 <h2 className="f2 lh-copy">Patterns</h2>
 
                 <div className="flex flex-wrap">
+                    <div className="pa2 w-20">
+                        <Link to="/badge" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                            <BadgeCover />
+                            <h4 className="f4 mv0 pt3">Badge</h4>
+                        </Link>
+                    </div>
                     <div className="pa2 w-20">
                         <Link to="/centering" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
                             <CenterCover />

client/covers/BadgeCover.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Frame from '../placeholders/Frame';
+
+const BadgeCover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex flex-column items-center justify-center">
+                <div className="flex flex-column items-center justify-center white bg-black-30 br-pill w2 h2">
+                    1
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default BadgeCover;

client/layouts/Badge.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import DetailsLayout from '../DetailsLayout';
+import BrowserFrame from '../placeholders/BrowserFrame';
+import Dot from '../placeholders/Dot';
+import Rectangle from '../placeholders/Rectangle';
+import SampleCode from '../SampleCode';
+import useDocumentTitle from '../useDocumentTitle';
+
+const Badge = () => {
+    useDocumentTitle('CSS Layout ∙ Badge');
+
+    return (
+        <DetailsLayout>
+            <h1 className="f1 tc">Badge</h1>
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex flex-column items-center justify-center">
+                        <div className="flex flex-column items-center justify-center white bg-black-30 br-pill w2 h2 f4">
+                            1
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div style="
+    /* Content is centered */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Colors */
+    background-color: rgba(0, 0, 0, .3);
+    color: #FFF;
+
+    /* Rounded border */
+    border-radius: 9999px;
+    height: 32px;
+    width: 32px;
+">
+    1
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Badge;