Add a button to flip between demo/source

client/layouts/Centering.jsx

@@ -6,11 +6,16 @@ import BrowserFrame from '../placeholders/BrowserFrame';
 const Centering = () => {
     return (
         <DetailsLayout name="Centering">
-            <BrowserFrame>
+            <BrowserFrame
+                content={
                     <div className="h-100 flex flex-column items-center justify-center">
                         <div className="f1 b">CENTER</div>
                     </div>
-            </BrowserFrame>
+                }
+                source={
+                    <div>source</div>
+                }
+            />
         </DetailsLayout>
     );
 };

client/placeholders/BrowserFrame.jsx

@@ -1,15 +1,42 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+const BrowserFrame = ({ content, source }) => {
+    const [isContentActive, setContentActive] = useState(true);
+    const flip = () => setContentActive(isActive => !isActive);
 
-const BrowserFrame = ({ children }) => {
     return (
         <div className="br2 ba b--black-20">
             <div className="flex pa3 bb b--black-20 items-center">
                 <div className="br-100 mr1 w1 h1 bg-red" />
                 <div className="br-100 mr1 w1 h1 bg-gold" />
                 <div className="br-100 mr1 w1 h1 bg-red" />
+                <div className="ml-auto">
+                    <buton className="pointer bg-dark-blue br2 ph2 pv1 white" onClick={flip}>
+                        {isContentActive ? 'Source' : 'Demo'}
+                    </buton>
+                </div>
+            </div>
+            <div
+                className="relative"
+                style={{
+                    height: '512px',
+                    transition: 'transform 1s',
+                    transformStyle: 'preserve-3d',
+                    transform: isContentActive ? '' : 'rotateY(180deg)',
+                }}
+            >
+                <div className="absolute top-0 left-0 h-100 w-100" style={{ backfaceVisibility: 'hidden' }}>
+                    {content}
+                </div>
+                <div
+                    className="absolute top-0 left-0 h-100 w-100"
+                    style={{
+                        backfaceVisibility: 'hidden',
+                        transform: 'rotateY(180deg)',
+                    }}
+                >
+                    {source}
                 </div>
-            <div style={{ height: '512px' }}>
-                {children}
             </div>
         </div>
     );