Implement multilingual support: Integrate i18next for language translation across components, update configuration for multilingual descriptions and keywords, and enhance user interface elements with dynamic language switching. Add new dependencies for i18next and related libraries in package.json and package-lock.json.

src/components/header/ButtonGroup.js

@@ -10,7 +10,9 @@ import CloseIcon from '@mui/icons-material/Close';
 import { useNavigate } from 'react-router-dom';
 import LoginComponent from '../LoginComponent.js';
 import CartDropdown from '../CartDropdown.js';
+import LanguageSwitcher from '../LanguageSwitcher.js';
 import { isUserLoggedIn } from '../LoginComponent.js';
+import { withI18n } from '../../i18n/withTranslation.js';
 
 function getBadgeNumber() {
   let count = 0;
@@ -116,14 +118,14 @@ class ButtonGroup extends Component {
   }
 
   render() {
-    const { socket, navigate } = this.props;
+    const { socket, navigate, t } = this.props;
     const { isCartOpen } = this.state;
     const cartItems = Array.isArray(window.cart) ? window.cart : [];
     
     return (
       <Box sx={{ display: 'flex', gap: { xs: 0.5, sm: 1 } }}>
         
-        
+        <LanguageSwitcher />
         <LoginComponent socket={socket} />
                 
         <IconButton 
@@ -164,7 +166,7 @@ class ButtonGroup extends Component {
               >
                 <CloseIcon />
               </IconButton>
-              <Typography variant="h6">Warenkorb</Typography>
+              <Typography variant="h6">{t ? t('cart.title') : 'Warenkorb'}</Typography>
             </Box>
             <Divider sx={{ mb: 2 }} />
             
@@ -189,10 +191,11 @@ class ButtonGroup extends Component {
   }
 }
 
-// Wrapper for ButtonGroup to provide navigate function
+// Wrapper for ButtonGroup to provide navigate function and translations
 const ButtonGroupWithRouter = (props) => {
   const navigate = useNavigate();
-  return <ButtonGroup {...props} navigate={navigate} />;
+  const ButtonGroupWithTranslation = withI18n()(ButtonGroup);
+  return <ButtonGroupWithTranslation {...props} navigate={navigate} />;
 };
 
 export default ButtonGroupWithRouter;