add translations

public/static/locales/en/projectDetails.json

@@ -1,3 +1,12 @@
 {
-    "satelliteAnalysis": "Satellite Analysis"
+    "satelliteAnalysis": "Satellite Analysis",
+    "biomassChange": "Biomass Change",
+    "potentialBiomass": "Potential Biomass",
+    "treeCover": "Tree Cover",
+    "fireRisk": "Fire Risk",
+    "floodingRisk": "Flooding Risk",
+    "speciesDensity": "Species Density",
+    "projectBegin": "Since project begin",
+    "avg": "Average",
+    "tons": "tons"
 }

src/temp/VegetationChangeDatabox/Databox.tsx

@@ -4,20 +4,24 @@ import Dropdown from './Dropdown';
 import BiomassChangeIcon from '../icons/BiomassChangeIcon';
 import VegetationSlider from './VegetationSlider';
 import NewInfoIcon from '../icons/NewInfoIcon';
+import { useTranslation } from 'next-i18next';
 
 interface Props {
   startYear: number;
 }
 const Databox = ({ startYear }: Props) => {
+  const { t } = useTranslation('projectDetails');
   return (
     <div className={styles.databoxContainer}>
       <div className={styles.dropdownInfoContainer}>
         <Dropdown
           labelIcon={<BiomassChangeIcon />}
-          labelTitle={'Biomass Change'}
+          labelTitle={t('biomassChange')}
           isOpen={false}
         />
-        <p className={styles.startYearText}>Since project begin {startYear}</p>
+        <p className={styles.startYearText}>
+          {t('projectBegin')} {startYear}
+        </p>
       </div>
       <div className={styles.divider}></div>
       <div className={styles.sliderInfoContainer}>

src/temp/VegetationChangeDatabox/Dropdown.tsx

@@ -7,6 +7,7 @@ import styles from './VegetationChangeDatabox.module.scss';
 import SpeciesDensityIcon from '../icons/SpeciesDensityIcon';
 import FloodingRiskIcon from '../icons/FloodingRiskIcon';
 import DropdownArrow from '../icons/DropdownArrow';
+import { useTranslation } from 'next-i18next';
 
 interface Props {
   labelIcon: React.JSX.Element;
@@ -15,30 +16,31 @@ interface Props {
 }
 
 const Dropdown = ({ labelIcon, labelTitle, isOpen }: Props) => {
+  const { t } = useTranslation('projectDetails');
   const optionsList = [
     {
       icon: <BiomassChangeIcon />,
-      title: 'Biomass Change',
+      title: t('biomassChange'),
     },
     {
       icon: <PotentialBiomassIcon />,
-      title: 'Potential Biomass',
+      title: t('potentialBiomass'),
     },
     {
       icon: <TreeCoverIcon />,
-      title: 'Tree Cover',
+      title: t('treeCover'),
     },
     {
       icon: <FireIcon />,
-      title: 'Fire Risk',
+      title: t('fireRisk'),
     },
     {
       icon: <FloodingRiskIcon />,
-      title: 'Flooding Risk',
+      title: t('floodingRisk'),
     },
     {
       icon: <SpeciesDensityIcon />,
-      title: 'Species Density',
+      title: t('speciesDensity'),
     },
   ];
   const [selectedOption, setSelectedOption] = useState({

src/temp/VegetationChangeDatabox/VegetationSlider.tsx

@@ -1,6 +1,7 @@
 import { Box, Typography, styled } from '@mui/material';
 import Slider from '@mui/material/Slider';
 import React from 'react';
+import { useTranslation } from 'next-i18next';
 
 interface Props {
   position: number;
@@ -56,10 +57,11 @@ const StyledSlider = styled(Slider)(() => {
 });
 
 const VegetationSlider = ({ position }: Props) => {
+  const { t } = useTranslation('projectDetails');
   function getLabelText(value: number) {
     return (
       <div className="labelText">
-        <span>Average</span> +{value} tons
+        <span>{t('avg')}</span> +{value} {t('tons')}
       </div>
     );
   }
@@ -83,8 +85,8 @@ const VegetationSlider = ({ position }: Props) => {
           fontWeight: 600,
         }}
       >
-        <Typography>-20 tons</Typography>
-        <Typography>20 tons</Typography>
+        <Typography>-20 {t('tons')}</Typography>
+        <Typography>20 {t('tons')}</Typography>
       </Box>
     </div>
   );