diff --git a/client/layouts/RelatedPatterns.jsx b/client/layouts/RelatedPatterns.jsx
new file mode 100644
index 0000000..b29d221
--- /dev/null
+++ b/client/layouts/RelatedPatterns.jsx
@@ -0,0 +1,19 @@
+import React, { useEffect } from 'react';
+
+import CoverCard from '../CoverCard';
+
+const RelatedPatterns = ({ patterns }) => {
+ return (
+
+
Related patterns
+
+
+ {
+ patterns.map(pattern => )
+ }
+
+
+ );
+};
+
+export default RelatedPatterns;
diff --git a/client/patterns/radio-switch/Details.jsx b/client/patterns/radio-switch/Details.jsx
index bb671e7..00bdd6a 100644
--- a/client/patterns/radio-switch/Details.jsx
+++ b/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={`
+
);
};
diff --git a/client/patterns/switch/Details.jsx b/client/patterns/switch/Details.jsx
index 7d59140..8fa8ffb 100644
--- a/client/patterns/switch/Details.jsx
+++ b/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={`
}
/>
+
);
};