From df4f4e2ccd6f58f9a94ac55da05bdbfe933a37b4 Mon Sep 17 00:00:00 2001
From: gianantoniopini <63844628+gianantoniopini@users.noreply.github.com>
Date: Mon, 9 Nov 2020 17:07:48 +0100
Subject: [PATCH] Issue #314: Updated Onyx template to incorporate birthDate
 field through new component BirthDateB

---
 src/templates/Onyx.js                        |  6 ++++-
 src/templates/blocks/BirthDate/BirthDateB.js | 27 ++++++++++++++++++++
 src/templates/blocks/Icons.js                |  6 +++--
 3 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 src/templates/blocks/BirthDate/BirthDateB.js

diff --git a/src/templates/Onyx.js b/src/templates/Onyx.js
index 5f44924f..04b9f983 100644
--- a/src/templates/Onyx.js
+++ b/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
diff --git a/src/templates/blocks/BirthDate/BirthDateB.js b/src/templates/blocks/BirthDate/BirthDateB.js
new file mode 100644
index 00000000..67a14059
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/src/templates/blocks/Icons.js b/src/templates/blocks/Icons.js
index 7e24dcf0..afc93f5f 100644
--- a/src/templates/blocks/Icons.js
+++ b/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;