Add heading component

client/Home.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import CoverCard from './components/CoverCard';
+import Heading from './components/Heading';
 import useDocumentTitle from './hooks/useDocumentTitle';
 import Layout from './layouts/Layout';
 
@@ -45,8 +46,8 @@ const Home = () => {
                     </div>
                 </div>
 
-                <div className="bt b--black-20 relative">
+                <section>
-                    <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>Layouts</h3>
+                    <Heading title="Layouts" />
 
                     <div className="flex flex-wrap items-start pa4">
                         <CoverCard pattern="Holy grail" />
@@ -55,10 +56,10 @@ const Home = () => {
                         <CoverCard pattern="Sticky footer" />
                         <CoverCard pattern="Sticky header" />
                     </div>
-                </div>
+                </section>
 
-                <div className="bt b--black-20 relative">
+                <section>
-                    <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>Patterns</h3>
+                    <Heading title="Patterns" />
 
                     <div className="flex flex-wrap items-start pa4">
                         <CoverCard pattern="Badge" />
@@ -93,7 +94,7 @@ const Home = () => {
                         <CoverCard pattern="Toggle password visibility" />
                         <CoverCard pattern="Wizard" />
                     </div>
-                </div>
+                </section>
             </div>
         </Layout>
     );

client/components/Heading.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Heading = ({ title }) => {
+    return (
+        <div className="bt b--black-20 relative">
+            <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>{title}</h3>
+        </div>
+    );
+};
+
+export default Heading;

client/components/RelatedPatterns.jsx

@@ -1,18 +1,19 @@
 import React, { useEffect } from 'react';
 
 import CoverCard from './CoverCard';
+import Heading from './Heading';
 
 const RelatedPatterns = ({ patterns }) => {
     return (
-        <div className="bt b--black-20 relative">
+        <section>
-            <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0px, -50%)' }}>Related patterns</h3>
+            <Heading title="Related patterns" />
 
             <div className="flex flex-wrap items-start pa4">
                 {
                     patterns.map(pattern => <CoverCard key={pattern} pattern={pattern} />)
                 }
             </div>
-        </div>
+        </section>
     );
 };
 

client/layouts/Footer.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 
+import Heading from '../components/Heading';
+
 const Footer = () => {
     return (
         <div className="bl br bb b--black-20 flex justify-between br4 br--bottom">
-            <div className="bt br b--black-20 relative" style={{ flex: 1 }}>
+            <div className="br b--black-20" style={{ flex: 1 }}>
-                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>Products</h3>
+                <Heading title="Products" />
 
                 <ul className="list ma0 pa0 lh-copy fw5 pa4">
                     <li>
@@ -25,8 +27,8 @@ const Footer = () => {
                 </ul>
             </div>
 
-            <div className="bt b--black-20 relative" style={{ flex: 1 }}>
+            <div style={{ flex: 1 }}>
-                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>About</h3>
+                <Heading title="About" />
 
                 <div className="pa4">
                     <div className="pb2 lh-copy">© 2019 Nguyen Huu Phuoc and contributors</div>

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import Heading from '../../components/Heading';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -44,8 +45,8 @@ const Details = () => {
 `}
                 />
             </div>
-            <div className="bt b--black-20 relative">
+            <section>
-                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0px, -50%)' }}>Use cases</h3>
+                <Heading title="Use cases" />
 
                 <div className="pa4">
                     <div className="mb4 w4 pa2 relative ba b--black-30 br2">
@@ -67,7 +68,7 @@ const Details = () => {
                         </div>
                     </div>
                 </div>
-            </div>
+            </section>
         </DetailsLayout>
     );
 };

client/patterns/radio-switch/Details.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 
+import Heading from '../../components/Heading';
 import RelatedPatterns from '../../components/RelatedPatterns';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -56,8 +57,8 @@ const Details = () => {
 `}
                 />
             </div>
-            <div className="bt b--black-20 relative">
+            <section>
-                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0px, -50%)' }}>Use cases</h3>
+                <Heading title="Use cases" />
 
                 <div className="pa4">
                     <div className="inline-flex br-pill bg-black-10 pa1">
@@ -71,7 +72,7 @@ const Details = () => {
                         </label>
                     </div>
                 </div>
-            </div>
+            </section>
             <RelatedPatterns patterns={['Switch']} />
         </DetailsLayout>
     );