- complete onyx design template

- implement public sharable urls
- implement more actions

src/templates/blocks/Certifications/CertificationsA.js

@@ -2,30 +2,34 @@ import moment from 'moment';
 import React, { memo, useContext } from 'react';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
 
 const CertificationItem = (x) => (
-  <div key={x.id} className="mb-2">
+  <div key={x.id}>
     <div className="flex justify-between items-center">
-      <div>
+      <div className="flex flex-col">
         <h6 className="font-semibold">{x.title}</h6>
-        <p className="text-xs">{x.issuer}</p>
+        <span className="text-xs">{x.issuer}</span>
       </div>
-
-      <h6 className="text-xs font-medium">
-        {moment(x.date).format('MMMM YYYY')}
-      </h6>
+      {x.date && (
+        <h6 className="text-xs font-medium">
+          {moment(x.date).format('MMMM YYYY')}
+        </h6>
+      )}
     </div>
-    <ReactMarkdown className="mt-2 text-sm" source={x.summary} />
+    <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
   </div>
 );
 
 const CertificationsA = () => {
   const { data, heading: Heading } = useContext(PageContext);
 
-  return data.certifications.visible && data.certifications.items ? (
+  return safetyCheck(data.certifications) ? (
     <div>
       <Heading>{data.certifications.heading}</Heading>
-      {data.certifications.items.map(CertificationItem)}
+      <div className="grid gap-4">
+        {data.certifications.items.map(CertificationItem)}
+      </div>
     </div>
   ) : null;
 };