feat: add Hindi translations for various tools and components

src/components/Navbar/index.tsx

@@ -13,7 +13,10 @@ import {
   ListItem,
   ListItemButton,
   ListItemText,
-  Stack
+  Stack,
+  Select,
+  MenuItem,
+  FormControl
 } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
@@ -30,7 +33,7 @@ const Navbar: React.FC<NavbarProps> = ({
   mode,
   onChangeMode: onChangeMode
 }) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const navigate = useNavigate();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -38,12 +41,46 @@ const Navbar: React.FC<NavbarProps> = ({
   const toggleDrawer = (open: boolean) => () => {
     setDrawerOpen(open);
   };
+
+  const handleLanguageChange = (event: any) => {
+    i18n.changeLanguage(event.target.value);
+  };
+
   const navItems: { label: string; path: string }[] = [
     // { label: 'Features', path: '/features' }
     // { label: 'About Us', path: '/about-us' }
   ];
 
+  const languageSelector = (
+    <FormControl size="small" sx={{ minWidth: 120 }}>
+      <Select
+        value={i18n.language}
+        onChange={handleLanguageChange}
+        displayEmpty
+        sx={{
+          color: 'inherit',
+          '& .MuiSelect-icon': {
+            color: 'inherit'
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: 'transparent'
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: 'transparent'
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: 'transparent'
+          }
+        }}
+      >
+        <MenuItem value="en">English</MenuItem>
+        <MenuItem value="hi">हिंदी</MenuItem>
+      </Select>
+    </FormControl>
+  );
+
   const buttons: ReactNode[] = [
+    languageSelector,
     <Icon
       key={mode}
       onClick={onChangeMode}