chore: i18n in meta

src/pages/tools-by-category/index.tsx

@@ -2,8 +2,8 @@ import {
   Box,
   Divider,
   Stack,
-  TextField,
   styled,
+  TextField,
   useTheme
 } from '@mui/material';
 import Grid from '@mui/material/Grid';
@@ -11,16 +11,16 @@ import Typography from '@mui/material/Typography';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { filterTools, getToolsByCategory } from '../../tools';
 import Hero from 'components/Hero';
-import { capitalizeFirstLetter, getToolCategoryTitle } from '@utils/string';
+import { getToolCategoryTitle } from '@utils/string';
 import { Icon } from '@iconify/react';
 import { categoriesColors } from 'config/uiConfig';
 import React, { useEffect } from 'react';
 import IconButton from '@mui/material/IconButton';
-import { ArrowBack } from '@mui/icons-material';
-import BackButton from '@components/BackButton';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SearchIcon from '@mui/icons-material/Search';
 import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
+import { I18nNamespaces } from '../../i18n';
 
 const StyledLink = styled(Link)(({ theme }) => ({
   '&:hover': {
@@ -34,7 +34,15 @@ export default function ToolsByCategory() {
   const { categoryName } = useParams();
   const [searchTerm, setSearchTerm] = React.useState<string>('');
   const rawTitle = getToolCategoryTitle(categoryName as string);
-
+  const categoryTools = filterTools(
+    getToolsByCategory().find(({ type }) => type === categoryName)?.tools ?? [],
+    searchTerm
+  );
+  const { t } = useTranslation(
+    categoryTools.length
+      ? (categoryTools[0].name.split(':')[0] as I18nNamespaces)
+      : 'translation'
+  );
   useEffect(() => {
     if (mainContentRef.current) {
       mainContentRef.current.scrollIntoView({ behavior: 'smooth' });
@@ -82,11 +90,7 @@ export default function ToolsByCategory() {
           />
         </Stack>
         <Grid container spacing={2} mt={2}>
-          {filterTools(
-            getToolsByCategory().find(({ type }) => type === categoryName)
-              ?.tools ?? [],
-            searchTerm
-          ).map((tool, index) => (
+          {categoryTools.map((tool, index) => (
             <Grid item xs={12} md={6} lg={4} key={tool.path}>
               <Stack
                 sx={{
@@ -120,10 +124,10 @@ export default function ToolsByCategory() {
                     }}
                     to={'/' + tool.path}
                   >
-                    {tool.name}
+                    {t(tool.name)}
                   </StyledLink>
                   <Typography sx={{ mt: 2 }}>
-                    {tool.shortDescription}
+                    {t(tool.shortDescription)}
                   </Typography>
                 </Box>
               </Stack>