fix: i18n

src/pages/home/Categories.tsx

@@ -9,6 +9,7 @@ import { categoriesColors } from 'config/uiConfig';
 import { Icon } from '@iconify/react';
 import { useTranslation } from 'react-i18next';
 import { getI18nNamespaceFromToolCategory } from '@utils/string';
+import { validNamespaces } from '../../i18n';
 
 type ArrayElement<ArrayType extends readonly unknown[]> =
   ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
@@ -32,10 +33,10 @@ const SingleCategory = function ({
     `categories.${category.type}.description`,
     category.description
   );
-  const seeAllText = t('categories.seeAll', 'See all {{title}}', {
+  const seeAllText = t('translation:categories.seeAll', 'See all {{title}}', {
     title: categoryTitle
   });
-  const tryText = t('categories.try', 'Try {{title}}', {
+  const tryText = t('translation:categories.try', 'Try {{title}}', {
     //@ts-ignore
     title: t(category.example.title)
   });
@@ -111,9 +112,10 @@ const SingleCategory = function ({
   );
 };
 export default function Categories() {
+  const { t } = useTranslation();
   return (
     <Grid width={'80%'} container mt={2} spacing={2}>
-      {getToolsByCategory().map((category, index) => (
+      {getToolsByCategory(t).map((category, index) => (
         <SingleCategory key={category.type} category={category} index={index} />
       ))}
     </Grid>

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

@@ -23,7 +23,7 @@ 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';
+import { I18nNamespaces, validNamespaces } from '../../i18n';
 
 const StyledLink = styled(Link)(({ theme }) => ({
   '&:hover': {
@@ -36,16 +36,12 @@ export default function ToolsByCategory() {
   const mainContentRef = React.useRef<HTMLDivElement>(null);
   const { categoryName } = useParams();
   const [searchTerm, setSearchTerm] = React.useState<string>('');
-  const rawTitle = getToolCategoryTitle(categoryName as string);
+  const { t } = useTranslation(validNamespaces);
+  const rawTitle = getToolCategoryTitle(categoryName as string, t);
   // First get tools by category without filtering
   const toolsByCategory =
-    getToolsByCategory().find(({ type }) => type === categoryName)?.tools ?? [];
-
-  const namespace =
-    toolsByCategory.length > 0
-      ? getI18nNamespaceFromToolCategory(toolsByCategory[0].type)
-      : 'translation';
-  const { t } = useTranslation(namespace);
+    getToolsByCategory(t).find(({ type }) => type === categoryName)?.tools ??
+    [];
 
   const categoryTools = filterTools(toolsByCategory, searchTerm, t);
 
@@ -77,10 +73,9 @@ export default function ToolsByCategory() {
             <IconButton onClick={() => navigate('/')}>
               <ArrowBackIcon color={'primary'} />
             </IconButton>
-            <Typography
-              fontSize={22}
-              color={theme.palette.primary.main}
-            >{`All ${rawTitle} Tools`}</Typography>
+            <Typography fontSize={22} color={theme.palette.primary.main}>
+              {t('translation:toolLayout.allToolsTitle', { type: rawTitle })}
+            </Typography>
           </Stack>
           <TextField
             placeholder={'Search'}