- implement i18n

- translation dynamic for sections
- added articles for SEO

src/components/builder/left/LeftNavbar.js

@@ -1,39 +1,43 @@
 import { Link } from 'gatsby';
 import React, { memo } from 'react';
 import { Tooltip } from '@material-ui/core';
+import { useTranslation } from 'react-i18next';
 import sections from '../../../data/leftSections';
 import Avatar from '../../shared/Avatar';
 import Logo from '../../shared/Logo';
 import SectionIcon from '../../shared/SectionIcon';
 import styles from './LeftNavbar.module.css';
 
-const LeftNavbar = () => (
-  <div className={styles.container}>
-    <Tooltip title="Go Back to Dashboard" placement="right">
-      <div>
-        <Link to="/app/dashboard">
-          <Logo size="40px" />
-        </Link>
+const LeftNavbar = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.container}>
+      <Tooltip title={t('builder.tooltips.backToDashboard')} placement="right">
+        <div>
+          <Link to="/app/dashboard">
+            <Logo size="40px" />
+          </Link>
+        </div>
+      </Tooltip>
+
+      <hr className="my-6" />
+
+      <div className="grid grid-cols-1 gap-4 text-primary-500">
+        {sections.map((x) => (
+          <SectionIcon
+            key={x.id}
+            section={x}
+            containerId="LeftSidebar"
+            tooltipPlacement="right"
+          />
+        ))}
       </div>
-    </Tooltip>
 
-    <hr className="my-6" />
+      <hr className="mt-auto my-6" />
 
-    <div className="grid grid-cols-1 gap-4 text-primary-500">
-      {sections.map((x) => (
-        <SectionIcon
-          key={x.id}
-          section={x}
-          containerId="LeftSidebar"
-          tooltipPlacement="right"
-        />
-      ))}
+      <Avatar />
     </div>
-
-    <hr className="mt-auto my-6" />
-
-    <Avatar />
-  </div>
-);
+  );
+};
 
 export default memo(LeftNavbar);

src/components/builder/left/LeftSidebar.js

@@ -1,5 +1,6 @@
 import React, { Fragment, memo } from 'react';
 import { Element } from 'react-scroll';
+import { useTranslation } from 'react-i18next';
 import sections from '../../../data/leftSections';
 import LeftNavbar from './LeftNavbar';
 import styles from './LeftSidebar.module.css';
@@ -48,18 +49,24 @@ const getComponent = (id) => {
 };
 
 const LeftSidebar = () => {
+  const { t } = useTranslation();
+
   return (
     <div className="flex">
       <LeftNavbar />
 
       <div id="LeftSidebar" className={styles.container}>
-        {sections.map(({ id, name, event }) => {
+        {sections.map(({ id, event }) => {
           const Component = getComponent(id);
 
           return (
             <Fragment key={id}>
               <Element name={id}>
-                <Component id={id} name={name} event={event} />
+                <Component
+                  id={id}
+                  name={t(`builder.sections.${id}`)}
+                  event={event}
+                />
               </Element>
               <hr />
             </Fragment>

src/components/builder/left/sections/Objective.js

@@ -1,13 +1,20 @@
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 
-const Objective = () => {
+const Objective = ({ name }) => {
+  const { t } = useTranslation();
+
   return (
     <section>
-      <Heading>Objective</Heading>
+      <Heading>{name}</Heading>
 
-      <Input type="textarea" label="Objective" path="objective.body" />
+      <Input
+        type="textarea"
+        label={t('shared.forms.summary')}
+        path="objective.body"
+      />
     </section>
   );
 };

src/components/builder/left/sections/Profile.js

@@ -1,45 +1,80 @@
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import PhotoUpload from '../../../shared/PhotoUpload';
 
-const Profile = () => {
+const Profile = ({ name }) => {
+  const { t } = useTranslation();
+
   return (
     <section>
-      <Heading>Profile</Heading>
+      <Heading>{name}</Heading>
 
       <PhotoUpload />
 
       <div className="grid grid-cols-2 gap-6">
-        <Input name="firstName" label="First Name" path="profile.firstName" />
-        <Input name="lastName" label="Last Name" path="profile.lastName" />
+        <Input
+          name="firstName"
+          label={t('builder.profile.firstName')}
+          path="profile.firstName"
+        />
+        <Input
+          name="lastName"
+          label={t('builder.profile.lastName')}
+          path="profile.lastName"
+        />
       </div>
 
-      <Input name="subtitle" label="Subtitle" path="profile.subtitle" />
+      <Input
+        name="subtitle"
+        label={t('shared.forms.subtitle')}
+        path="profile.subtitle"
+      />
 
       <hr />
 
       <Input
         name="addressLine1"
-        label="Address Line 1"
+        label={t('builder.profile.address.line1')}
         path="profile.address.line1"
       />
       <Input
         name="addressLine2"
-        label="Address Line 2"
+        label={t('builder.profile.address.line2')}
         path="profile.address.line2"
       />
 
       <div className="grid grid-cols-2 gap-6">
-        <Input name="city" label="City" path="profile.address.city" />
-        <Input name="pincode" label="Pincode" path="profile.address.pincode" />
+        <Input
+          name="city"
+          label={t('builder.profile.address.city')}
+          path="profile.address.city"
+        />
+        <Input
+          name="pincode"
+          label={t('builder.profile.address.pincode')}
+          path="profile.address.pincode"
+        />
       </div>
 
       <hr />
 
-      <Input name="phone" label="Phone Number" path="profile.phone" />
-      <Input name="website" label="Website" path="profile.website" />
-      <Input name="email" label="Email Address" path="profile.email" />
+      <Input
+        name="phone"
+        label={t('shared.forms.phone')}
+        path="profile.phone"
+      />
+      <Input
+        name="website"
+        label={t('shared.forms.website')}
+        path="profile.website"
+      />
+      <Input
+        name="email"
+        label={t('shared.forms.email')}
+        path="profile.email"
+      />
     </section>
   );
 };