Add related patterns section

client/layouts/RelatedPatterns.jsx

@@ -0,0 +1,19 @@
+import React, { useEffect } from 'react';
+
+import CoverCard from '../CoverCard';
+
+const RelatedPatterns = ({ patterns }) => {
+    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(0px, -50%)' }}>Related patterns</h3>
+
+            <div className="flex flex-wrap items-start pa4">
+                {
+                    patterns.map(pattern => <CoverCard key={pattern} pattern={pattern} />)
+                }
+            </div>
+        </div>
+    );
+};
+
+export default RelatedPatterns;

client/patterns/radio-switch/Details.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
+import RelatedPatterns from '../../layouts/RelatedPatterns';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import SampleCode from '../../SampleCode';
 
@@ -77,6 +78,7 @@ code={`
                     </div>
                 </div>
             </div>
+            <RelatedPatterns patterns={['Switch']} />
         </DetailsLayout>
     );
 };

client/patterns/switch/Details.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
+import RelatedPatterns from '../../layouts/RelatedPatterns';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import SampleCode from '../../SampleCode';
 
@@ -67,6 +68,7 @@ code={`
                     }
                 />
             </div>
+            <RelatedPatterns patterns={['Radio switch']} />
         </DetailsLayout>
     );
 };