Refactor details view

client/components/SampleCode.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import highlight from './helpers/highlight';
+import highlight from '../helpers/highlight';
 
 const SampleCode = ({ code, lang }) => {
     return code === ''

client/patterns/badge/Details.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -16,10 +15,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     /* Content is centered */
     align-items: center;
@@ -35,11 +31,9 @@ code={`
     height: 32px;
     width: 32px;
 ">
-    1
+    ...
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/breadcrumb/Details.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -23,10 +22,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     /* Content is centered vertically */
     align-items: center;
@@ -42,8 +38,6 @@ code={`
     ...
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/button-with-icon/Details.jsx

@@ -4,7 +4,6 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -21,10 +20,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <button style="
     /* Content is centered */
     align-items: center;
@@ -39,8 +35,6 @@ code={`
     ...
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/card/Details.jsx

@@ -4,7 +4,6 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -24,10 +23,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     display: flex;
     flex-direction: column;
@@ -50,8 +46,6 @@ code={`
     ...
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/centering/Details.jsx

@@ -4,7 +4,6 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -19,10 +18,7 @@ const Details = () => {
                             <div className="w-20 mt2"><Rectangle /></div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     align-items: center;
     display: flex;
@@ -31,8 +27,6 @@ code={`
     ...
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/docked-at-corner/Details.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -21,10 +20,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     position: relative;
 ">
@@ -46,8 +42,6 @@ code={`
     ...
 </div>
 `}
-/>
-                    }
                 />
             </div>
             <div className="bt b--black-20 relative">

client/patterns/dot-navigation/Details.jsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     const [activeItem, setActiveItem] = useState(0);
@@ -36,10 +35,7 @@ const Details = () => {
                             </ul>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <ul style="
     /* Content is centered */
     align-items: center;
@@ -69,8 +65,6 @@ code={`
     " />
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/feature-list/Details.jsx

@@ -6,8 +6,6 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-import SampleCode from '../../SampleCode';
-
 const Details = () => {
     return (
         <DetailsLayout title="Feature list">
@@ -33,10 +31,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <!-- Feature item -->
 <div style="
     display: flex;
@@ -66,8 +61,6 @@ code={`
 <!-- Repeated items -->
 ...
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/fixed-at-corner/Details.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Triangle from '../../placeholders/Triangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -26,10 +25,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     position: relative;
 ">
@@ -70,8 +66,6 @@ code={`
     </div>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/holy-grail/Details.jsx

@@ -4,7 +4,6 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -32,10 +31,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     display: flex;
     flex-direction: column;
@@ -74,8 +70,6 @@ code={`
     </footer>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/input-add-on/Details.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -37,10 +36,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <!-- Add-on prepended -->
 <div style="
     display: flex;
@@ -123,8 +119,6 @@ code={`
     </div>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/media-object/Details.jsx

@@ -5,7 +5,6 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import Square from '../../placeholders/Square';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -26,10 +25,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     /* Align sub-items to top */
     align-items: start;
@@ -54,8 +50,6 @@ code={`
     </div>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/menu/Details.jsx

@@ -4,7 +4,6 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -48,10 +47,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     display: flex;
     flex-direction: column;
@@ -110,8 +106,6 @@ code={`
     " />
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/modal/Details.jsx

@@ -5,7 +5,6 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -32,10 +31,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     /* Border */
     border: 1px solid rgba(0, 0, 0.3);
@@ -69,8 +65,6 @@ code={`
     </div>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/notification/Details.jsx

@@ -4,7 +4,6 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -21,10 +20,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     display: flex;
     justify-content: space-between;
@@ -36,8 +32,6 @@ code={`
     ...
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/pagination/Details.jsx

@@ -4,7 +4,6 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -35,10 +34,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     display: flex;
 
@@ -73,8 +69,6 @@ code={`
     </div>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/previous-next-buttons/Details.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -26,10 +25,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     align-items: center;
     display: flex;
@@ -42,8 +38,6 @@ code={`
     <a>..</a>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/pricing-table/Details.jsx

@@ -5,7 +5,6 @@ import Circle from '../../placeholders/Circle';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -42,10 +41,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     /* Content is centered horizontally */
     align-items: center;
@@ -87,8 +83,6 @@ code={`
     ...
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/progress-bar/Details.jsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import SampleCode from '../../SampleCode';
 import useInterval from '../../hooks/useInterval';
 
 const Details = () => {
@@ -24,10 +23,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     /* Colors */
     background-color: rgba(0, 0, 0, .1);
@@ -56,8 +52,6 @@ code={`
     </div>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/questions-and-answers/Details.jsx

@@ -5,7 +5,6 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import Triangle from '../../placeholders/Triangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     const [activeItem, setActiveItem] = useState(-1);
@@ -61,10 +60,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <!-- Each question and answer item -->
 <div style="
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
@@ -85,8 +81,6 @@ code={`
     <!-- Answer -->
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/radio-switch/Details.jsx

@@ -3,7 +3,6 @@ import React, { useState } from 'react';
 import RelatedPatterns from '../../components/RelatedPatterns';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     const [isFirstChecked, setFirstChecked] = useState(false);
@@ -27,10 +26,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <!-- Container -->
 <div style="
     background-color: rgba(0, 0, 0, .1);
@@ -58,8 +54,6 @@ code={`
     ...
 </div>
 `}
-/>
-                    }
                 />
             </div>
             <div className="bt b--black-20 relative">

client/patterns/same-height-columns/Details.jsx

@@ -4,7 +4,6 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -46,10 +45,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="display: flex;">
     <!-- Column -->
     <div style="
@@ -80,8 +76,6 @@ code={`
     ...
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/search-box/Details.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -29,10 +28,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     display: flex;
 
@@ -56,8 +52,6 @@ code={`
     ...
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/separator/Details.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -20,10 +19,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     /* Content is centered horizontally */
     align-items: center;
@@ -54,8 +50,6 @@ code={`
     " />
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/sidebar/Details.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Block from '../../placeholders/Block';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -26,10 +25,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="display: flex;">
     <!-- Sidebar -->
     <aside style="width: 30%;">
@@ -45,8 +41,6 @@ code={`
     </main>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/simple-grid/Details.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -84,10 +83,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <!-- Row -->
 <div style="
     display: flex;
@@ -112,8 +108,6 @@ code={`
     </div>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/slider/Details.jsx

@@ -4,7 +4,6 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import Circle from '../../placeholders/Circle';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -20,10 +19,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     /* Content is centered horizontally */
     align-items: center;
@@ -66,8 +62,6 @@ code={`
     " />
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/split-navigation/Details.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -20,10 +19,7 @@ const Details = () => {
                             </ul>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <ul style="
     /* Content is centered horizontally */
     align-items: center;
@@ -47,8 +43,6 @@ code={`
     </li>
 </ul>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/split-screen/Details.jsx

@@ -5,7 +5,6 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Block from '../../placeholders/Block';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -27,10 +26,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="display: flex;">
     <!-- Left content -->
     <div style="flex: 1;">
@@ -43,8 +39,6 @@ code={`
     </div>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/stepper-input/Details.jsx

@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     const [value, setValue] = useState(0);
@@ -29,10 +28,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     display: flex;
 
@@ -75,8 +71,6 @@ code={`
     ">+</button>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/sticky-footer/Details.jsx

@@ -4,7 +4,6 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -27,10 +26,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     display: flex;
     flex-direction: column;
@@ -47,8 +43,6 @@ code={`
     </footer>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/sticky-header/Details.jsx

@@ -4,7 +4,6 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -24,10 +23,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div>
     <header style="
         position: sticky;
@@ -40,8 +36,6 @@ code={`
     </main>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/switch/Details.jsx

@@ -3,7 +3,6 @@ import React, { useState } from 'react';
 import RelatedPatterns from '../../components/RelatedPatterns';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     const [checked, setChecked] = useState(false);
@@ -22,10 +21,7 @@ const Details = () => {
                             </label>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <label style="
     display: flex;
 
@@ -64,8 +60,6 @@ code={`
     " />
 </label>
 `}
-/>
-                    }
                 />
             </div>
             <RelatedPatterns patterns={['Radio switch']} />

client/patterns/tab/Details.jsx

@@ -3,7 +3,6 @@ import React, { useState } from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     const [activeTab, setActiveTab] = useState(0);
@@ -49,10 +48,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     /* Content is centered */
     align-items: center;
@@ -82,8 +78,6 @@ code={`
     </div>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/toggle-password-visibility/Details.jsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     const [visible, setVisible] = useState(false);
@@ -43,10 +42,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     display: flex;
 
@@ -69,8 +65,6 @@ code={`
     </button>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/patterns/wizard/Details.jsx

@@ -5,7 +5,6 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Line from '../../placeholders/Line';
-import SampleCode from '../../SampleCode';
 
 const Details = () => {
     return (
@@ -42,10 +41,7 @@ const Details = () => {
                             </div>
                         </div>
                     }
-                    source={
-<SampleCode
-lang="html"
-code={`
+                    source={`
 <div style="
     display: flex;
 ">
@@ -110,8 +106,6 @@ code={`
     </div>
 </div>
 `}
-/>
-                    }
                 />
             </div>
         </DetailsLayout>

client/placeholders/BrowserFrame.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 
+import SampleCode from '../components/SampleCode';
+
 const BrowserFrame = ({ content, source }) => {
     const [isContentActive, setContentActive] = useState(true);
     const flip = () => setContentActive(isActive => !isActive);
@@ -42,7 +44,7 @@ const BrowserFrame = ({ content, source }) => {
                         WebkitBackfaceVisibility: 'hidden',
                     }}
                 >
-                    {source}
+                    <SampleCode lang="html" code={source} />
                 </div>
             </div>
         </div>