- completed design of Onyx template

src/templates/blocks/Hobbies/HobbiesA.js

@@ -0,0 +1,21 @@
+import React, { memo, useContext } from 'react';
+import PageContext from '../../../contexts/PageContext';
+
+const HobbyA = (x) => (
+  <div key={x.id} className="mb-2">
+    <h6 className="font-semibold">{x.name}</h6>
+  </div>
+);
+
+const HobbiesA = () => {
+  const { data, heading: Heading } = useContext(PageContext);
+
+  return data.hobbies.visible && data.hobbies.items ? (
+    <div>
+      <Heading>{data.hobbies.heading}</Heading>
+      {data.hobbies.items.map(HobbyA)}
+    </div>
+  ) : null;
+};
+
+export default memo(HobbiesA);