- implement gengar template

src/templates/blocks/Awards/AwardsA.js

@@ -12,7 +12,7 @@ const AwardItem = (x) => (
         <span className="text-xs">{x.awarder}</span>
       </div>
       {x.date && (
-        <h6 className="text-xs font-medium">
+        <h6 className="text-xs font-medium text-right">
           {moment(x.date).format('MMMM YYYY')}
         </h6>
       )}

src/templates/blocks/Certifications/CertificationsA.js

@@ -12,7 +12,7 @@ const CertificationItem = (x) => (
         <span className="text-xs">{x.issuer}</span>
       </div>
       {x.date && (
-        <h6 className="text-xs font-medium">
+        <h6 className="text-xs font-medium text-right">
           {moment(x.date).format('MMMM YYYY')}
         </h6>
       )}

src/templates/blocks/Contact/ContactB.js

@@ -0,0 +1,64 @@
+import { get } from 'lodash';
+import React, { memo, useContext } from 'react';
+import { FaCaretRight } from 'react-icons/fa';
+import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
+import Icons from '../Icons';
+
+const ContactItem = ({ value, icon, link }) => {
+  const { data } = useContext(PageContext);
+  const Icon = get(Icons, icon.toLowerCase(), FaCaretRight);
+
+  return value ? (
+    <div className="flex items-center">
+      <Icon
+        size="10px"
+        className="mr-2"
+        style={{ color: data.metadata.colors.background }}
+      />
+      {link ? (
+        <a href={link} target="_blank" rel="noopener noreferrer">
+          <span className="font-medium break-all">{value}</span>
+        </a>
+      ) : (
+        <span className="font-medium break-all">{value}</span>
+      )}
+    </div>
+  ) : null;
+};
+
+const ContactA = () => {
+  const { data } = useContext(PageContext);
+
+  return (
+    <div className="text-xs grid gap-2">
+      <ContactItem
+        icon="phone"
+        value={data.profile.phone}
+        link={`tel:${data.profile.phone}`}
+      />
+      <ContactItem
+        icon="website"
+        value={data.profile.website}
+        link={`http://${data.profile.website}`}
+      />
+      <ContactItem
+        icon="email"
+        value={data.profile.email}
+        link={`mailto:${data.profile.email}`}
+      />
+
+      {safetyCheck(data.social) &&
+        data.social.items.map((x) => (
+          <ContactItem
+            key={x.id}
+            value={x.username}
+            icon={x.network}
+            link={x.url}
+          />
+        ))}
+    </div>
+  );
+};
+
+export default memo(ContactA);

src/templates/blocks/Education/EducationA.js

@@ -12,9 +12,9 @@ const EducationItem = (x) => (
           <strong>{x.degree}</strong> {x.field}
         </span>
       </div>
-      <div className="flex flex-col items-end">
+      <div className="flex flex-col items-end text-right">
         {x.startDate && (
-          <h6 className="text-xs font-medium">
+          <h6 className="text-xs font-medium mb-1">
             ({formatDateRange({ startDate: x.startDate, endDate: x.endDate })})
           </h6>
         )}

src/templates/blocks/Heading/HeadingB.js

@@ -0,0 +1,20 @@
+import React, { memo, useContext } from 'react';
+import PageContext from '../../../contexts/PageContext';
+
+const HeadingB = ({ children }) => {
+  const { data } = useContext(PageContext);
+
+  return (
+    <h6
+      className="mb-2 border-b-2 pb-1 font-bold uppercase tracking-wide text-sm"
+      style={{
+        color: data.metadata.colors.primary,
+        borderColor: data.metadata.colors.primary,
+      }}
+    >
+      {children}
+    </h6>
+  );
+};
+
+export default memo(HeadingB);

src/templates/blocks/Heading/HeadingC.js

@@ -0,0 +1,11 @@
+import React, { memo } from 'react';
+
+const HeadingC = ({ children }) => {
+  return (
+    <h6 className="font-bold text-xs uppercase tracking-wide mb-1">
+      {children}
+    </h6>
+  );
+};
+
+export default memo(HeadingC);

src/templates/blocks/Projects/ProjectsA.js

@@ -16,7 +16,7 @@ const ProjectItem = (x) => (
         )}
       </div>
       {x.date && (
-        <h6 className="text-xs font-medium">
+        <h6 className="text-xs font-medium text-right">
           {moment(x.date).format('MMMM YYYY')}
         </h6>
       )}

src/templates/blocks/References/ReferencesB.js

@@ -0,0 +1,31 @@
+import React, { memo, useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
+import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
+
+const ReferenceItem = (x) => (
+  <div key={x.id} className="flex flex-col">
+    <h6 className="font-semibold">{x.name}</h6>
+    <span className="text-xs">{x.position}</span>
+    <span className="text-xs">{x.phone}</span>
+    <span className="text-xs">{x.email}</span>
+    {x.summary && (
+      <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
+    )}
+  </div>
+);
+
+const ReferencesB = () => {
+  const { data, heading: Heading } = useContext(PageContext);
+
+  return safetyCheck(data.references) ? (
+    <div>
+      <Heading>{data.references.heading}</Heading>
+      <div className="grid gap-4">
+        {data.references.items.map(ReferenceItem)}
+      </div>
+    </div>
+  ) : null;
+};
+
+export default memo(ReferencesB);

src/templates/blocks/Skills/SkillsB.js

@@ -0,0 +1,22 @@
+import React, { memo, useContext } from 'react';
+import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
+
+const SkillItem = (x) => (
+  <li key={x.id} className="text-sm py-1">
+    {x.skill}
+  </li>
+);
+
+const SkillsA = () => {
+  const { data, heading: Heading } = useContext(PageContext);
+
+  return safetyCheck(data.skills) ? (
+    <div>
+      <Heading>{data.skills.heading}</Heading>
+      <ul>{data.skills.items.map(SkillItem)}</ul>
+    </div>
+  ) : null;
+};
+
+export default memo(SkillsA);

src/templates/blocks/Work/WorkA.js

@@ -11,7 +11,7 @@ const WorkItem = (x) => (
         <span className="text-xs">{x.position}</span>
       </div>
       {x.startDate && (
-        <h6 className="text-xs font-medium">
+        <h6 className="text-xs font-medium text-right">
           ({formatDateRange({ startDate: x.startDate, endDate: x.endDate })})
         </h6>
       )}