Add Switch

client/App.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-router-dom';
 
 import Home from './Home';
 import Badge from './layouts/badge/Details';
@@ -23,11 +23,12 @@ import SplitScreen from './layouts/split-screen/Details';
 import StepperInput from './layouts/stepper-input/Details';
 import StickyFooter from './layouts/sticky-footer/Details';
 import StickyHeader from './layouts/sticky-header/Details';
+import Switch from './layouts/switch/Details';
 
 const App = () => {
     return (
         <Router>
-            <Switch>
+            <RouteSwitch>
                 <Route exact={true} path='/'><Home /></Route>
                 <Route exact={true} path='/badge'><Badge /></Route>
                 <Route exact={true} path='/breadcrumb'><Breadcrumb /></Route>
@@ -50,7 +51,8 @@ const App = () => {
                 <Route exact={true} path='/stepper-input'><StepperInput /></Route>
                 <Route exact={true} path='/sticky-footer'><StickyFooter /></Route>
                 <Route exact={true} path='/sticky-header'><StickyHeader /></Route>
-            </Switch>
+                <Route exact={true} path='/switch'><Switch /></Route>
+            </RouteSwitch>
         </Router>
     );
 };

client/Home.jsx

@@ -22,6 +22,7 @@ import SplitScreenCover from './layouts/split-screen/Cover';
 import StepperInputCover from './layouts/stepper-input/Cover';
 import StickyFooterCover from './layouts/sticky-footer/Cover';
 import StickyHeaderCover from './layouts/sticky-header/Cover';
+import SwitchCover from './layouts/switch/Cover';
 import Layout from './Layout';
 import useDocumentTitle from './hooks/useDocumentTitle';
 
@@ -179,6 +180,12 @@ const Home = () => {
                             <h4 className="f5 mv0 pt3">Stepper input</h4>
                         </Link>
                     </div>
+                    <div className="pa1 w-20">
+                        <Link to="/switch" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                            <SwitchCover />
+                            <h4 className="f5 mv0 pt3">Switch</h4>
+                        </Link>
+                    </div>
                 </div>
             </div>
         </Layout>

client/layouts/switch/Cover.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex flex-column items-center justify-center pa2">
+                <div className="ba b--blue bg-blue br-pill h1 w2 flex justify-end">
+                    <div className="bg-white br-pill w1 h-100" />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/layouts/switch/Details.jsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+
+import DetailsLayout from '../../DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import SampleCode from '../../SampleCode';
+import useDocumentTitle from '../../hooks/useDocumentTitle';
+
+const Details = () => {
+    useDocumentTitle('CSS Layout ∙ Switch');
+    const [checked, setChecked] = useState(false);
+    const toggle = () => setChecked(c => !c);
+
+    return (
+        <DetailsLayout>
+            <h1 className="f1 tc">Switch</h1>
+            <div className="lh-copy mb3">The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.</div>
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex flex-column items-center justify-center">
+                        <label className={`ba br-pill h2 w3 flex ${checked ? 'justify-end b--blue bg-blue' : 'b--black-30 bg-black-10'}`}>
+                            <input type="checkbox" className="dn" checked={checked} onClick={toggle} />
+                            <div className={`bg-white br-pill w2 ${checked ? '' : 'ba b--black-30'}`} />
+                        </label>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<label style="
+    display: flex;
+
+    /* Rounded border */
+    border-radius: 9999px;
+
+    /* Size */
+    height: 32px;
+    width: 64px;
+
+    /* OFF status */
+    background-color: rgba(0, 0, 0, .1);
+    border: 1px solid rgba(0, 0, 0, .3);
+
+    /* ON status */
+    background-color: #357edd;
+    border: 1px solid #357edd;
+    /* Push the circle to the right */
+    justify-content: flex-end;
+">
+    <!-- Hide the input -->
+    <input type="checkbox" style="display: none" />
+
+    <!-- Circle -->
+    <div style="
+        /* Rounded border */
+        border-radius: 9999px;
+
+        /* Size */
+        width: 32px;
+
+        background-color: #FFF;
+
+        /* OFF status */
+        border: 1px solid rgba(0, 0, 0, .3);
+    " />
+</label>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Details;