- implement i18n

- translation dynamic for sections
- added articles for SEO

src/modals/sections/ReferenceModal.js

@@ -1,6 +1,7 @@
 import { Formik } from 'formik';
 import React, { memo } from 'react';
 import * as Yup from 'yup';
+import { useTranslation } from 'react-i18next';
 import Input from '../../components/shared/Input';
 import ModalEvents from '../../constants/ModalEvents';
 import { getFieldProps } from '../../utils';
@@ -14,15 +15,17 @@ const initialValues = {
   summary: '',
 };
 
-const schema = Yup.object().shape({
-  name: Yup.string().required('This is a required field.'),
-  position: Yup.string().required('This is a required field.'),
-  phone: Yup.string(),
-  email: Yup.string().email('Must be a valid email address.'),
-  summary: Yup.string(),
-});
-
 const ReferenceModal = () => {
+  const { t } = useTranslation();
+
+  const schema = Yup.object().shape({
+    name: Yup.string().required(t('shared.forms.validation.required')),
+    position: Yup.string().required(t('shared.forms.validation.required')),
+    phone: Yup.string(),
+    email: Yup.string().email(t('shared.forms.validation.email')),
+    summary: Yup.string(),
+  });
+
   return (
     <Formik
       validateOnBlur
@@ -31,38 +34,38 @@ const ReferenceModal = () => {
     >
       {(formik) => (
         <DataModal
-          name="Reference"
+          name={t('builder.sections.reference')}
           path="references.items"
           event={ModalEvents.REFERENCE_MODAL}
         >
           <div className="grid grid-cols-2 gap-8">
             <Input
-              label="Name"
+              label={t('shared.forms.name')}
               placeholder="Jane Doe"
               {...getFieldProps(formik, schema, 'name')}
             />
 
             <Input
-              label="position"
+              label={t('shared.forms.position')}
               placeholder="Assistant Manager"
               {...getFieldProps(formik, schema, 'position')}
             />
 
             <Input
-              label="Phone Number"
+              label={t('shared.forms.phone')}
               placeholder="+1 (708) 756-6065"
               {...getFieldProps(formik, schema, 'phone')}
             />
 
             <Input
-              label="Email Address"
+              label={t('shared.forms.email')}
               placeholder="janedoe@example.com"
               {...getFieldProps(formik, schema, 'email')}
             />
 
             <Input
               type="textarea"
-              label="Summary"
+              label={t('shared.forms.summary')}
               className="col-span-2"
               {...getFieldProps(formik, schema, 'summary')}
             />