- implement i18n

- translation dynamic for sections
- added articles for SEO

src/modals/sections/SkillModal.js

@@ -1,5 +1,6 @@
 import { Formik } from 'formik';
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
 import Input from '../../components/shared/Input';
 import ModalEvents from '../../constants/ModalEvents';
@@ -19,14 +20,16 @@ const initialValues = {
   level: SKILL_LEVELS[0],
 };
 
-const schema = Yup.object().shape({
-  name: Yup.string().required('This is a required field.'),
-  level: Yup.string()
-    .oneOf(SKILL_LEVELS, 'Must be one of the options above.')
-    .required('This is a required field.'),
-});
-
 const SkillModal = () => {
+  const { t } = useTranslation();
+
+  const schema = Yup.object().shape({
+    name: Yup.string().required(t('shared.forms.validation.required')),
+    level: Yup.string()
+      .oneOf(SKILL_LEVELS)
+      .required(t('shared.forms.validation.required')),
+  });
+
   return (
     <Formik
       validateOnBlur
@@ -35,19 +38,19 @@ const SkillModal = () => {
     >
       {(formik) => (
         <DataModal
-          name="Skill"
+          name={t('builder.sections.skill')}
           path="skills.items"
           event={ModalEvents.SKILL_MODAL}
         >
           <div className="grid grid-cols-2 gap-8">
             <Input
-              label="Name"
+              label={t('shared.forms.name')}
               placeholder="ReactJS"
               {...getFieldProps(formik, schema, 'name')}
             />
 
             <Input
-              label="Level"
+              label={t('builder.skills.level')}
               type="dropdown"
               options={SKILL_LEVELS}
               {...getFieldProps(formik, schema, 'level')}