- implement i18n

- translation dynamic for sections
- added articles for SEO

src/modals/ResumeModal.js

@@ -1,36 +1,27 @@
 import { Formik } from 'formik';
 import React, { memo, useContext } from 'react';
 import * as Yup from 'yup';
+import { useTranslation } from 'react-i18next';
 import Input from '../components/shared/Input';
 import ModalEvents from '../constants/ModalEvents';
 import DatabaseContext from '../contexts/DatabaseContext';
 import { getFieldProps } from '../utils';
 import DataModal from './DataModal';
-import leftSections from '../data/leftSections';
 
 const initialValues = {
   name: '',
-  metadata: {
-    template: 'onyx',
-    font: 'Montserrat',
-    layout: [leftSections.map(({ id, name }) => ({ id, name }))],
-    colors: {
-      text: '#444444',
-      primary: '#5875DB',
-      background: '#FFFFFF',
-    },
-  },
 };
 
-const schema = Yup.object().shape({
-  name: Yup.string()
-    .min(5, 'Please enter at least 5 characters.')
-    .required('This is a required field.'),
-});
-
 const ResumeModal = () => {
+  const { t } = useTranslation();
   const { createResume, updateResume } = useContext(DatabaseContext);
 
+  const schema = Yup.object().shape({
+    name: Yup.string()
+      .min(5, t('shared.forms.validation.min', { number: 5 }))
+      .required(t('shared.forms.validation.required')),
+  });
+
   return (
     <Formik
       validateOnBlur
@@ -39,28 +30,22 @@ const ResumeModal = () => {
     >
       {(formik) => (
         <DataModal
-          name="Resume"
           title={{
-            create: 'Create Resume',
-            edit: 'Edit Resume',
+            create: t('dashboard.createResume'),
+            edit: t('dashboard.editResume'),
           }}
           onEdit={updateResume}
           onCreate={createResume}
           event={ModalEvents.CREATE_RESUME_MODAL}
         >
           <Input
-            label="Name"
+            label={t('shared.forms.name')}
             className="mb-8"
             placeholder="Full Stack Web Developer"
             {...getFieldProps(formik, schema, 'name')}
           />
 
-          <p className="leading-loose">
-            You are going to be creating a new resume from scratch, but first,
-            let&apos;s give it a name. This can be the name of the role you want
-            to apply for, or if you&apos;re making a resume for a friend, you
-            could call it Alex&apos;s Resume.
-          </p>
+          <p className="leading-loose">{t('dashboard.helpText')}</p>
         </DataModal>
       )}
     </Formik>