fix: i18n

src/components/Hero.tsx

@@ -151,7 +151,7 @@ export default function Hero() {
         renderGroup={(params) => {
           return (
             <li key={params.key}>
-              <GroupHeader>{getToolCategoryTitle(params.group)}</GroupHeader>
+              <GroupHeader>{getToolCategoryTitle(params.group, t)}</GroupHeader>
               <GroupItems>{params.children}</GroupItems>
             </li>
           );

src/components/ToolHeader.tsx

@@ -11,6 +11,7 @@ import { isBookmarked, toggleBookmarked } from '@utils/bookmark';
 import IconButton from '@mui/material/IconButton';
 import { useTranslation } from 'react-i18next';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { validNamespaces } from '../i18n';
 
 const StyledButton = styled(Button)(({ theme }) => ({
   backgroundColor: 'white',
@@ -94,6 +95,7 @@ export default function ToolHeader({
   path
 }: ToolHeaderProps) {
   const theme = useTheme();
+  const { t } = useTranslation();
   const [bookmarked, setBookmarked] = useState<boolean>(isBookmarked(path));
   return (
     <Box my={4}>
@@ -101,7 +103,7 @@ export default function ToolHeader({
         items={[
           { title: 'All tools', link: '/' },
           {
-            title: getToolsByCategory().find(
+            title: getToolsByCategory(t).find(
               (category) => category.type === type
             )!.rawTitle,
             link: '/categories/' + type

src/components/ToolLayout.tsx

@@ -43,7 +43,7 @@ export default function ToolLayout({
   const toolDescription: string = t(i18n.description);
 
   const otherCategoryTools =
-    getToolsByCategory()
+    getToolsByCategory(t)
       .find((category) => category.type === type)
       ?.tools.filter((tool) => t(tool.name) !== toolTitle)
       .map((tool) => ({
@@ -75,10 +75,10 @@ export default function ToolLayout({
         {children}
         <Separator backgroundColor="#5581b5" margin="50px" />
         <AllTools
-          title={t('toolLayout.allToolsTitle', {
+          title={t('translation:toolLayout.allToolsTitle', {
             type: capitalizeFirstLetter(
-              getToolsByCategory().find((category) => category.type === type)!
-                .rawTitle
+              getToolsByCategory(t).find((category) => category.type === type)!
+                .title
             )
           })}
           toolCards={otherCategoryTools}