Issue #314: Updated Onyx template to incorporate birthDate field through new component BirthDateB

src/templates/Onyx.js

@@ -12,6 +12,7 @@ import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
+import BirthDateB from './blocks/BirthDate/BirthDateB'
 
 const Blocks = {
   objective: ObjectiveA,
@@ -70,7 +71,10 @@ const Onyx = ({ data }) => {
             </div>
           </div>
 
-          <Contact />
+          <div className="grid gap-4">
+            <BirthDateB />
+            <Contact />
+          </div>
         </div>
 
         <hr

src/templates/blocks/BirthDate/BirthDateB.js

@@ -0,0 +1,27 @@
+import React, { memo, useContext } from 'react';
+import PageContext from '../../../contexts/PageContext';
+import { get } from 'lodash';
+import Icons from '../Icons';
+import { formatDate } from '../../../utils';
+
+const BirthDateB = () => {
+  const { data } = useContext(PageContext);
+  const Icon = get(Icons, "birthdaycake");
+
+  if (data.profile.birthDate) {
+    return (
+      <div className="text-xs flex items-center">
+        <Icon
+          size="10px"
+          className="mr-2"
+          style={{ color: data.metadata.colors.primary }}
+        />
+        <span className="font-medium break-all">{formatDate({ date: data.profile.birthDate, language: data.metadata.language, includeDay: true })}</span>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+export default memo(BirthDateB);

src/templates/blocks/Icons.js

@@ -8,7 +8,8 @@ import {
   FaInstagram,
   FaStackOverflow,
   FaBehance,
-  FaGitlab
+  FaGitlab,
+  FaBirthdayCake
 } from 'react-icons/fa';
 import { MdPhone, MdEmail } from 'react-icons/md';
 
@@ -24,7 +25,8 @@ const Icons = {
   instagram: FaInstagram,
   stackoverflow: FaStackOverflow,
   behance: FaBehance,
-  gitlab: FaGitlab
+  gitlab: FaGitlab,
+  birthdaycake: FaBirthdayCake
 };
 
 export default Icons;