Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-19 03:01:53 +10:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #374 from gianantoniopini/develop

Browse Source 
Add a Birthdate field to the profile information
This commit is contained in:
Amruth Pillai
2020-11-22 12:00:26 +05:30
committed by GitHub
parent aea3950d73 0f390ab493
commit 97affd54fc
35 changed files with 153 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/builder/left/sections/Profile.js
View File

@ -38,6 +38,13 @@ const Profile = ({ id }) => {
path="profile.subtitle"
/>
<Input
type="date"
name="birthDate"
label={t('builder.profile.birthDate')}
path="profile.birthDate"
/>
<hr />
<Input

1
src/data/demoState.json
View File

@ -190,6 +190,7 @@
"line2": "Brindavan Layout, Subramanyapura,",
"pincode": "560061"
},
"birthDate": "",
"email": "hello@amruthpillai.com",
"firstName": "Amruth",
"heading": "Profile",

1
src/data/initialState.json
View File

@ -5,6 +5,7 @@
"firstName": "",
"lastName": "",
"subtitle": "",
"birthDate": "",
"address": {
"line1": "",
"line2": "",

1
src/i18n/locales/ar.json
View File

@ -96,6 +96,7 @@
"photograph": "صورة فوتوغرافية",
"firstName": "الاسم الاول",
"lastName": "اسم العائلة",
"birthDate": "تاريخ الولادة",
"address": {
"line1": "العنوان الأول",
"line2": "العنوان الثاني",

1
src/i18n/locales/da.json
View File

@ -96,6 +96,7 @@
"photograph": "Fotografi",
"firstName": "Fornavn",
"lastName": "Efternavn",
"birthDate": "Fødselsdato",
"address": {
"line1": "Adresse linie 1",
"line2": "Adresse linie 2",

1
src/i18n/locales/de.json
View File

@ -96,6 +96,7 @@
"photograph": "Foto",
"firstName": "Vorname",
"lastName": "Nachname",
"birthDate": "Geburtsdatum",
"address": {
"line1": "Adresszeile 1",
"line2": "Adresszeile 2",

1
src/i18n/locales/en.json
View File

@ -96,6 +96,7 @@
"photograph": "Photograph",
"firstName": "First Name",
"lastName": "Last Name",
"birthDate": "Date of Birth",
"address": {
"line1": "Address Line 1",
"line2": "Address Line 2",

1
src/i18n/locales/es.json
View File

@ -96,6 +96,7 @@
"photograph": "Fotografía",
"firstName": "Nombre",
"lastName": "Apellido",
"birthDate": "Fecha de Nacimiento",
"address": {
"line1": "Domicilio - Línea 1",
"line2": "Dirección - Línea 2",

1
src/i18n/locales/fi.json
View File

@ -96,6 +96,7 @@
"photograph": "Valokuva",
"firstName": "Etunimi",
"lastName": "Sukunimi",
"birthDate": "Syntymäaika",
"address": {
"line1": "Osoiterivi 1",
"line2": "Osoiterivi 2",

1
src/i18n/locales/fr.json
View File

@ -96,6 +96,7 @@
"photograph": "Photo",
"firstName": "Prénom",
"lastName": "Nom",
"birthDate": "Date de naissance",
"address": {
"line1": "Adresse (ligne 1)",
"line2": "Adresse (ligne 2)",

1
src/i18n/locales/hi.json
View File

@ -96,6 +96,7 @@
"photograph": "फोटो",
"firstName": "पहला नाम",
"lastName": "उपनाम",
"birthDate": "जन्म की तारीख",
"address": {
"line1": "पता पंक्ति 1",
"line2": "पता पंक्ति नं। 2",

1
src/i18n/locales/it.json
View File

@ -96,6 +96,7 @@
"photograph": "Fotografia",
"firstName": "Nome",
"lastName": "Cognome",
"birthDate": "Data di Nascita",
"address": {
"line1": "Riga Indirizzo 1",
"line2": "Riga Indirizzo 2",

1
src/i18n/locales/ja.json
View File

@ -96,6 +96,7 @@
"photograph": "写真",
"firstName": "名",
"lastName": "姓",
"birthDate": "生年月日",
"address": {
"line1": "都道府県",
"line2": "市区町村",

1
src/i18n/locales/kn.json
View File

@ -96,6 +96,7 @@
"photograph": "ಫೋಟೋ",
"firstName": "ಮೊದಲ ಹೆಸರು",
"lastName": "ಕೊನೆಯ ಹೆಸರು",
"birthDate": "ಹುಟ್ತಿದ ದಿನ",
"address": {
"line1": "ವಿಳಾಸ ಸಾಲು 1",
"line2": "ವಿಳಾಸ ಸಾಲು 2",

1
src/i18n/locales/nb.json
View File

@ -96,6 +96,7 @@
"photograph": "Foto",
"firstName": "Fornavn",
"lastName": "Etternavn",
"birthDate": "Fødselsdato",
"address": {
"line1": "Adresselinje 1",
"line2": "Adresselinje 2",

1
src/i18n/locales/nl.json
View File

@ -96,6 +96,7 @@
"photograph": "foto",
"firstName": "Voornaam",
"lastName": "Achternaam",
"birthDate": "Geboortedatum",
"address": {
"line1": "Adresveld 1",
"line2": "Adresveld 2",

1
src/i18n/locales/pl.json
View File

@ -96,6 +96,7 @@
"photograph": "Fotografia",
"firstName": "Imię",
"lastName": "Nazwisko",
"birthDate": "Data urodzenia",
"address": {
"line1": "Pole adresowe 1",
"line2": "Pole adresowe 2",

1
src/i18n/locales/pt-br.json
View File

@ -96,6 +96,7 @@
"photograph": "Foto",
"firstName": "Primeiro Nome",
"lastName": "Sobrenome",
"birthDate": "Data de Nascimento",
"address": {
"line1": "Endereço Linha 1",
"line2": "Endereço Linha 2",

1
src/i18n/locales/pt-pt.json
View File

@ -95,6 +95,7 @@
"photograph": "Fotografia",
"firstName": "Nome",
"lastName": "Apelido",
"birthDate": "Data de Nascimento",
"address": {
"line1": "Morada Linha 1",
"line2": "Morada Linha 2",

1
src/i18n/locales/ru.json
View File

@ -96,6 +96,7 @@
"photograph": "Фотография",
"firstName": "Имя",
"lastName": "Фамилия",
"birthDate": "Дата рождения",
"address": {
"line1": "Адрес, строка 1",
"line2": "Адрес, строка 2",

1
src/i18n/locales/sv.json
View File

@ -96,6 +96,7 @@
"photograph": "Fotografi",
"firstName": "Förnamn",
"lastName": "Efternamn",
"birthDate": "Födelsedatum",
"address": {
"line1": "Addressrad 1",
"line2": "Addressrad 2",

1
src/i18n/locales/tr.json
View File

@ -96,6 +96,7 @@
"photograph": "Fotoğraf",
"firstName": "Ad",
"lastName": "Soyad",
"birthDate": "Doğum Tarihi",
"address": {
"line1": "Adres Satırı 1",
"line2": "Adres Satırı 2",

1
src/i18n/locales/zh.json
View File

@ -96,6 +96,7 @@
"photograph": "照片",
"firstName": "姓",
"lastName": "名",
"birthDate": "出生日期",
"address": {
"line1": "地址（第一行）",
"line2": "地址（第二行）",

6
src/templates/Castform.js
View File

@ -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 BirthDateA from './blocks/BirthDate/BirthDateA'
const Blocks = {
objective: ObjectiveA,
@ -76,7 +77,10 @@ const Castform = ({ data }) => {
<div>
<HeadingD>{data.profile.heading}</HeadingD>
<ContactC />
<div className="grid gap-4">
<BirthDateA />
<ContactC />
</div>
</div>
{layout[0] &&

14
src/templates/Celebi.js
View File

@ -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 }) => {
<div className="grid grid-cols-12 gap-8">
<div className="col-span-4 ml-8" style={styles.leftSection}>
<Photo />
<div className="text-center grid gap-4 mt-4 mb-8 mx-6">
<ContactE />
<div>
<HeadingE>{t('builder.sections.profile')}</HeadingE>
<div className="relative w-full grid gap-4 text-xs">
<BirthDateA />
<ContactC />
</div>
</div>
{layout[0] &&
layout[0].map((x) => {

6
src/templates/Gengar.js
View File

@ -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 }}
/>
<ContactB />
<div className="grid gap-4">
<BirthDateC />
<ContactB />
</div>
</div>
<div

7
src/templates/Glalie.js
View File

@ -13,6 +13,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,
@ -70,7 +71,11 @@ const Glalie = ({ data }) => {
>
<div className="grid gap-6 text-center p-8">
<Profile />
<ContactD />
<div className="grid">
<BirthDateA />
<ContactD />
</div>
{layout[0] &&
layout[0].map((x) => {

6
src/templates/Onyx.js
View File

@ -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

2
src/templates/Pikachu.js
View File

@ -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 = {
work: WorkA,
@ -89,6 +90,7 @@ const Pikachu = ({ data }) => {
<div className="col-span-4">
<div className="grid gap-4">
<BirthDateB />
<ContactA />
{layout[0] &&

26
src/templates/blocks/BirthDate/BirthDateA.js Normal file
View File

@ -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 (
<div className="text-xs">
<h6 className="capitalize font-semibold">
{t('builder.profile.birthDate')}
</h6>
<div>
<span>{formatDate({ date: data.profile.birthDate, language: data.metadata.language, includeDay: true })}</span>
</div>
</div>
);
}
return null;
}
export default memo(BirthDateA);

27
src/templates/blocks/BirthDate/BirthDateB.js Normal file
View File

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

27
src/templates/blocks/BirthDate/BirthDateC.js Normal file
View File

@ -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 (
<div className="text-xs flex items-center">
<Icon
size="10px"
className="mr-2"
style={{ color: data.metadata.colors.background }}
/>
<span className="font-medium break-all">{formatDate({ date: data.profile.birthDate, language: data.metadata.language, includeDay: true })}</span>
</div>
);
}
return null;
}
export default memo(BirthDateC);

72
src/templates/blocks/Contact/ContactE.js
View File

@ -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 ? (
<div className="flex flex-col">
<h6 className="capitalize font-semibold">{label}</h6>
{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 ContactE = () => {
const { t } = useTranslation();
const { data, heading: Heading } = useContext(PageContext);
return (
<div>
<Heading>{t('builder.sections.profile')}</Heading>
<div className="relative w-full grid gap-2 text-xs">
<div>
<h6 className="capitalize font-semibold">
{t('shared.forms.address')}
</h6>
<div className="flex flex-col 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>
<ContactItem
label={t('shared.forms.phone')}
value={data.profile.phone}
link={`tel:${data.profile.phone}`}
/>
<ContactItem
label={t('shared.forms.website')}
value={data.profile.website}
link={data.profile.website}
/>
<ContactItem
label={t('shared.forms.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}
label={x.network}
link={x.url}
/>
))}
</div>
</div>
);
};
export default memo(ContactE);

6
src/templates/blocks/Icons.js
View File

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

7
src/utils/index.js
View File

@ -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) => {