- completed design of Onyx template

src/templates/Onyx.js

@@ -1,60 +1,107 @@
-import React, { memo } from 'react';
-import { FaGlobeAmericas, FaPhone } from 'react-icons/fa';
-import { MdEmail } from 'react-icons/md';
+import React, { memo, useEffect } from 'react';
+import PageContext from '../contexts/PageContext';
+import { useDispatch } from '../contexts/ResumeContext';
+import AwardsA from './blocks/Awards/AwardsA';
+import CertificationsA from './blocks/Certifications/CertificationsA';
+import Contact from './blocks/Contact/ContactA';
+import EducationA from './blocks/Education/EducationA';
+import Heading from './blocks/Heading/HeadingA';
+import HobbiesA from './blocks/Hobbies/HobbiesA';
+import LanguagesA from './blocks/Languages/LanguagesA';
+import ObjectiveA from './blocks/Objective/ObjectiveA';
+import ReferencesA from './blocks/References/ReferencesA';
+import SkillsA from './blocks/Skills/SkillsA';
+import WorkA from './blocks/Work/WorkA';
+
+const Blocks = {
+  objective: ObjectiveA,
+  work: WorkA,
+  education: EducationA,
+  awards: AwardsA,
+  certifications: CertificationsA,
+  skills: SkillsA,
+  hobbies: HobbiesA,
+  languages: LanguagesA,
+  references: ReferencesA,
+};
 
 const Onyx = ({ data }) => {
-  const { profile, metadata } = data;
-  const { font, colors, layout } = metadata;
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch({ type: 'set_block_count', payload: 3 });
+  }, []);
 
   return (
-    <div
-      className="p-8 grid grid-cols-10 gap-4 items-center"
-      style={{
-        fontFamily: font,
-        color: colors.text,
-        backgroundColor: colors.background,
-      }}
-    >
-      <img
-        className="col-span-2 rounded"
-        src="https://i.imgur.com/Icr472Z.jpg"
-        alt="Photograph"
-      />
-      <div className="col-span-5">
-        <h2 className="text-4xl font-bold" style={{ color: colors.primary }}>
-          {profile.firstName} {profile.lastName}
-        </h2>
-        <span className="font-medium">Customer Sales Representative</span>
+    <PageContext.Provider value={{ data, heading: Heading }}>
+      <div
+        id="page"
+        className="p-10"
+        style={{
+          fontFamily: data.metadata.font,
+          color: data.metadata.colors.text,
+          backgroundColor: data.metadata.colors.background,
+        }}
+      >
+        <div className="grid grid-cols-4 items-center">
+          <div className="col-span-3 flex items-center">
+            <img
+              className="rounded object-cover mr-4"
+              src={data.profile.photograph}
+              alt="Resume Photograph"
+              style={{ width: '120px', height: '120px' }}
+            />
 
-        <div className="mt-5 flex flex-col">
-          <span>3879 Gateway Avenue,</span>
-          <span>Bakersfield,</span>
-          <span>California, USA</span>
+            <div>
+              <h1
+                className="font-bold text-4xl"
+                style={{ color: data.metadata.colors.primary }}
+              >
+                {data.profile.firstName} {data.profile.lastName}
+              </h1>
+              <h6 className="font-medium text-sm">{data.profile.subtitle}</h6>
+
+              <div className="flex flex-col mt-4 text-xs">
+                <span>{data.profile.address.line1}</span>
+                <span>{data.profile.address.line2}</span>
+                <span>
+                  {data.profile.address.city} {data.profile.address.pincode}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <Contact />
+        </div>
+
+        <hr
+          className="my-6 opacity-25"
+          style={{ borderColor: data.metadata.colors.text }}
+        />
+
+        <div className="grid grid-cols-1 col-gap-8">
+          {data.metadata.layout[0] &&
+            data.metadata.layout[0].map((x) => {
+              const Component = Blocks[x];
+              return Component && <Component key={x} />;
+            })}
+
+          <div className="grid grid-cols-3 col-gap-8">
+            {data.metadata.layout[1] &&
+              data.metadata.layout[1].map((x) => {
+                const Component = Blocks[x];
+                return Component && <Component key={x} />;
+              })}
+          </div>
+
+          {data.metadata.layout[2] &&
+            data.metadata.layout[2].map((x) => {
+              const Component = Blocks[x];
+              return Component && <Component key={x} />;
+            })}
         </div>
       </div>
-      <div className="col-span-3 grid gap-4">
-        <div className="flex items-center">
-          <FaPhone size="14" style={{ color: colors.primary }} />
-          <span className="ml-4 text-sm font-medium">+1 661-808-4188</span>
-        </div>
-
-        <div className="flex items-center">
-          <FaGlobeAmericas size="14" style={{ color: colors.primary }} />
-          <span className="ml-4 text-sm font-medium">nancyontheweb.com</span>
-        </div>
-
-        <div className="flex items-center">
-          <MdEmail size="14" style={{ color: colors.primary }} />
-          <span className="ml-4 text-sm font-medium">
-            nancyjack43@gmail.com
-          </span>
-        </div>
-      </div>
-
-      <hr className="my-2 col-span-10" />
-
-      {JSON.stringify(layout)}
-    </div>
+    </PageContext.Provider>
   );
 };
 

src/templates/blocks/Awards/AwardsA.js

@@ -0,0 +1,33 @@
+import moment from 'moment';
+import React, { memo, useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
+import PageContext from '../../../contexts/PageContext';
+
+const AwardItem = (x) => (
+  <div key={x.id} className="mb-2">
+    <div className="flex justify-between items-center">
+      <div>
+        <h6 className="font-semibold">{x.title}</h6>
+        <p className="text-xs">{x.awarder}</p>
+      </div>
+
+      <h6 className="text-xs font-medium">
+        {moment(x.date).format('MMMM YYYY')}
+      </h6>
+    </div>
+    <ReactMarkdown className="mt-2 text-sm" source={x.summary} />
+  </div>
+);
+
+const AwardsA = () => {
+  const { data, heading: Heading } = useContext(PageContext);
+
+  return data.awards.visible && data.awards.items ? (
+    <div>
+      <Heading>{data.awards.heading}</Heading>
+      {data.awards.items.map(AwardItem)}
+    </div>
+  ) : null;
+};
+
+export default memo(AwardsA);

src/templates/blocks/Certifications/CertificationsA.js

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

src/templates/blocks/Contact/ContactA.js

@@ -0,0 +1,66 @@
+import { get } from 'lodash';
+import React, { memo, useContext } from 'react';
+import { FaCaretRight } from 'react-icons/fa';
+import PageContext from '../../../contexts/PageContext';
+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 my-3">
+      <Icon
+        size="14px"
+        className="mr-2"
+        style={{ color: data.metadata.colors.primary }}
+      />
+      {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="col-span-1 text-xs">
+      <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}`}
+      />
+
+      {data.social.visible && data.social.items ? (
+        <div>
+          {data.social.items.map((x) => (
+            <ContactItem
+              key={x.id}
+              value={x.username}
+              icon={x.network}
+              link={x.url}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default memo(ContactA);

src/templates/blocks/Education/EducationA.js

@@ -0,0 +1,42 @@
+import React, { memo, useContext } from 'react';
+import PageContext from '../../../contexts/PageContext';
+import { formatDateRange } from '../../../utils';
+
+const EducationItem = (x) => (
+  <div key={x.id} className="mb-2">
+    <div className="flex justify-between items-center">
+      <div>
+        <h6 className="font-semibold">{x.institution}</h6>
+        <span className="text-xs">
+          <strong>{x.degree}</strong> {x.field}
+        </span>
+      </div>
+      <div className="flex flex-col items-end">
+        <span className="text-xs font-medium">
+          ({formatDateRange({ startDate: x.startDate, endDate: x.endDate })})
+        </span>
+        <h6 className="text-sm font-medium">{x.gpa}</h6>
+      </div>
+    </div>
+    {x.courses && (
+      <ul className="mt-2 text-sm list-disc list-inside">
+        {x.courses.map((y) => (
+          <li key={y}>{y}</li>
+        ))}
+      </ul>
+    )}
+  </div>
+);
+
+const EducationA = () => {
+  const { data, heading: Heading } = useContext(PageContext);
+
+  return data.education.visible && data.education.items ? (
+    <div>
+      <Heading>{data.education.heading}</Heading>
+      {data.education.items.map(EducationItem)}
+    </div>
+  ) : null;
+};
+
+export default memo(EducationA);

src/templates/blocks/Heading/HeadingA.js

@@ -0,0 +1,17 @@
+import React, { useContext, memo } from 'react';
+import PageContext from '../../../contexts/PageContext';
+
+const HeadingA = ({ children }) => {
+  const { data } = useContext(PageContext);
+
+  return (
+    <h6
+      className="text-xs font-bold uppercase mt-4 mb-1"
+      style={{ color: data.metadata.colors.primary }}
+    >
+      {children}
+    </h6>
+  );
+};
+
+export default memo(HeadingA);

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);

src/templates/blocks/Icons.js

@@ -0,0 +1,24 @@
+import {
+  FaGlobeAmericas,
+  FaFacebookF,
+  FaTwitter,
+  FaLinkedinIn,
+  FaGithub,
+  FaDribbble,
+  FaInstagram,
+} from 'react-icons/fa';
+import { MdPhone, MdEmail } from 'react-icons/md';
+
+const Icons = {
+  phone: MdPhone,
+  website: FaGlobeAmericas,
+  email: MdEmail,
+  facebook: FaFacebookF,
+  twitter: FaTwitter,
+  linkedin: FaLinkedinIn,
+  github: FaGithub,
+  dribbble: FaDribbble,
+  instagram: FaInstagram,
+};
+
+export default Icons;

src/templates/blocks/Languages/LanguagesA.js

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

src/templates/blocks/Objective/ObjectiveA.js

@@ -0,0 +1,16 @@
+import React, { useContext, memo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import PageContext from '../../../contexts/PageContext';
+
+const ObjectiveA = () => {
+  const { data, heading: Heading } = useContext(PageContext);
+
+  return (
+    <div>
+      <Heading>{data.objective.heading}</Heading>
+      <ReactMarkdown className="text-sm" source={data.objective.body} />
+    </div>
+  );
+};
+
+export default memo(ObjectiveA);

src/templates/blocks/References/ReferencesA.js

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

src/templates/blocks/Skills/SkillsA.js

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

src/templates/blocks/Work/WorkA.js

@@ -0,0 +1,39 @@
+import React, { useContext, memo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import PageContext from '../../../contexts/PageContext';
+import { formatDateRange } from '../../../utils';
+
+const WorkItem = (x) => (
+  <div key={x.id} className="mb-4 last:mb-0">
+    <div className="flex justify-between items-center">
+      <div>
+        <h6 className="font-semibold">{x.company}</h6>
+        <span className="text-xs">{x.position}</span>
+      </div>
+      <span className="text-xs font-medium">
+        ({formatDateRange({ startDate: x.startDate, endDate: x.endDate })})
+      </span>
+    </div>
+    <ReactMarkdown className="mt-2 text-sm" source={x.summary} />
+    {x.highlights && (
+      <ul className="mt-2 text-sm list-disc list-inside">
+        {x.highlights.map((y) => (
+          <li key={y}>{y}</li>
+        ))}
+      </ul>
+    )}
+  </div>
+);
+
+const WorkA = () => {
+  const { data, heading: Heading } = useContext(PageContext);
+
+  return data.work.visible && data.work.items ? (
+    <div>
+      <Heading>{data.work.heading}</Heading>
+      <div>{data.work.items.map(WorkItem)}</div>
+    </div>
+  ) : null;
+};
+
+export default memo(WorkA);