diff --git a/src/components/builder/left/sections/Profile.js b/src/components/builder/left/sections/Profile.js index 45be2af4..2c4c9422 100644 --- a/src/components/builder/left/sections/Profile.js +++ b/src/components/builder/left/sections/Profile.js @@ -38,6 +38,13 @@ const Profile = ({ id }) => { path="profile.subtitle" /> + +
{
{data.profile.heading} - +
+ + +
{layout[0] && diff --git a/src/templates/Celebi.js b/src/templates/Celebi.js index 285af3f5..56275fd3 100644 --- a/src/templates/Celebi.js +++ b/src/templates/Celebi.js @@ -1,9 +1,10 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; import PageContext from '../contexts/PageContext'; import { hexToRgb } from '../utils'; import AwardsA from './blocks/Awards/AwardsA'; import CertificationsA from './blocks/Certifications/CertificationsA'; -import ContactE from './blocks/Contact/ContactE'; +import ContactC from './blocks/Contact/ContactC'; import EducationA from './blocks/Education/EducationA'; import HeadingE from './blocks/Heading/HeadingE'; import HobbiesA from './blocks/Hobbies/HobbiesA'; @@ -13,6 +14,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 BirthDateA from './blocks/BirthDate/BirthDateA' const Blocks = { objective: ObjectiveA, @@ -30,6 +32,7 @@ const Blocks = { const Celebi = ({ data }) => { const layout = data.metadata.layout.celebi; const { r, g, b } = hexToRgb(data.metadata.colors.primary) || {}; + const { t } = useTranslation(); const styles = { header: { @@ -94,8 +97,15 @@ const Celebi = ({ data }) => {
+
- +
+ {t('builder.sections.profile')} +
+ + +
+
{layout[0] && layout[0].map((x) => { diff --git a/src/templates/Gengar.js b/src/templates/Gengar.js index 07a65294..41f828e2 100644 --- a/src/templates/Gengar.js +++ b/src/templates/Gengar.js @@ -13,6 +13,7 @@ import ProjectsA from './blocks/Projects/ProjectsA'; import ReferencesB from './blocks/References/ReferencesB'; import SkillsA from './blocks/Skills/SkillsA'; import WorkA from './blocks/Work/WorkA'; +import BirthDateC from './blocks/BirthDate/BirthDateC' const Blocks = { objective: ObjectiveA, @@ -84,7 +85,10 @@ const Gengar = ({ data }) => { style={{ borderColor: data.metadata.colors.background }} /> - +
+ + +
{ >
- + +
+ + +
{layout[0] && layout[0].map((x) => { 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 }) => {
- +
+ + +
{
+ {layout[0] && diff --git a/src/templates/blocks/BirthDate/BirthDateA.js b/src/templates/blocks/BirthDate/BirthDateA.js new file mode 100644 index 00000000..486919a9 --- /dev/null +++ b/src/templates/blocks/BirthDate/BirthDateA.js @@ -0,0 +1,26 @@ +import React, { memo, useContext } from 'react'; +import { useTranslation } from 'react-i18next'; +import PageContext from '../../../contexts/PageContext'; +import { formatDate } from '../../../utils'; + +const BirthDateA = () => { + const { t } = useTranslation(); + const { data } = useContext(PageContext); + + if (data.profile.birthDate) { + return ( +
+
+ {t('builder.profile.birthDate')} +
+
+ {formatDate({ date: data.profile.birthDate, language: data.metadata.language, includeDay: true })} +
+
+ ); + } + + return null; +} + +export default memo(BirthDateA); \ No newline at end of file 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 ( +
+ + {formatDate({ date: data.profile.birthDate, language: data.metadata.language, includeDay: true })} +
+ ); + } + + return null; +} + +export default memo(BirthDateB); \ No newline at end of file diff --git a/src/templates/blocks/BirthDate/BirthDateC.js b/src/templates/blocks/BirthDate/BirthDateC.js new file mode 100644 index 00000000..8c8c04e9 --- /dev/null +++ b/src/templates/blocks/BirthDate/BirthDateC.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 BirthDateC = () => { + const { data } = useContext(PageContext); + const Icon = get(Icons, "birthdaycake"); + + if (data.profile.birthDate) { + return ( +
+ + {formatDate({ date: data.profile.birthDate, language: data.metadata.language, includeDay: true })} +
+ ); + } + + return null; +} + +export default memo(BirthDateC); \ No newline at end of file diff --git a/src/templates/blocks/Contact/ContactE.js b/src/templates/blocks/Contact/ContactE.js deleted file mode 100644 index 28413fea..00000000 --- a/src/templates/blocks/Contact/ContactE.js +++ /dev/null @@ -1,72 +0,0 @@ -import React, { memo, useContext } from 'react'; -import { useTranslation } from 'react-i18next'; -import PageContext from '../../../contexts/PageContext'; -import { safetyCheck } from '../../../utils'; - -const ContactItem = ({ value, label, link }) => { - return value ? ( -
-
{label}
- {link ? ( - - {value} - - ) : ( - {value} - )} -
- ) : null; -}; - -const ContactE = () => { - const { t } = useTranslation(); - const { data, heading: Heading } = useContext(PageContext); - - return ( -
- {t('builder.sections.profile')} -
-
-
- {t('shared.forms.address')} -
-
- {data.profile.address.line1} - {data.profile.address.line2} - - {data.profile.address.city} {data.profile.address.pincode} - -
-
- - - - - - {safetyCheck(data.social) && - data.social.items.map((x) => ( - - ))} -
-
- ); -}; - -export default memo(ContactE); 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; diff --git a/src/utils/index.js b/src/utils/index.js index 87e0daa9..273c53d3 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -20,8 +20,11 @@ export const isFileImage = (file) => { return file && acceptedImageTypes.includes(file.type); }; -export const formatDate = ({ date, language = 'en' }) => { - return dayjs(date).locale(language.substr(0, 2)).format('MMMM YYYY'); +export const formatDate = ({ date, language = 'en', includeDay = false }) => { + const monthYearTemplate = 'MMMM YYYY'; + const template = includeDay ? 'DD ' + monthYearTemplate : monthYearTemplate; + + return dayjs(date).locale(language.substr(0, 2)).format(template); }; export const formatDateRange = ({ startDate, endDate, language = 'en' }, t) => {