Refactor project for i18n support: Rename project to "i18n-translator" and update package.json and package-lock.json accordingly. Enhance localization by integrating translation functions across various components, including AddToCartButton, Content, GoogleLoginButton, and others, to provide dynamic text rendering based on user language preferences. Update localization files for multiple languages, ensuring comprehensive support for internationalization.

src/components/Content.js

@@ -13,6 +13,7 @@ import CategoryBox from './CategoryBox.js';
 
 import { useParams, useSearchParams } from 'react-router-dom';
 import { getAllSettingsWithPrefix } from '../utils/sessionStorage.js';
+import { withI18n } from '../i18n/withTranslation.js';
 
 const isNew = (neu) => neu && (new Date().getTime() - new Date(neu).getTime() < 30 * 24 * 60 * 60 * 1000);
 
@@ -149,17 +150,17 @@ function getFilteredProducts(unfilteredProducts, attributes) {
   
   // Check for "auf Lager" filter (in stock) - it's active when filter_availability is NOT set to '1'
   if (availabilityFilter !== '1') {
-    activeAvailabilityFilters.push({id: '1', name: 'auf Lager'});
+    activeAvailabilityFilters.push({id: '1', name: this.props.t ? this.props.t('product.inStock') : 'auf Lager'});
   }
   
   // Check for "Neu" filter (new) - only show if there are actually new products and filter is active
   if (availabilityFilters.includes('2') && hasNewProducts) {
-    activeAvailabilityFilters.push({id: '2', name: 'Neu'});
+    activeAvailabilityFilters.push({id: '2', name: this.props.t ? this.props.t('product.new') : 'Neu'});
   }
   
   // Check for "Bald verfügbar" filter (coming soon) - only show if there are actually coming soon products and filter is active
   if (availabilityFilters.includes('3') && hasComingSoonProducts) {
-    activeAvailabilityFilters.push({id: '3', name: 'Bald verfügbar'});
+    activeAvailabilityFilters.push({id: '3', name: this.props.t ? this.props.t('product.comingSoon') : 'Bald verfügbar'});
   }
 
   return {filteredProducts,activeAttributeFilters:activeAttributeFiltersWithNames,activeManufacturerFilters:activeManufacturerFiltersWithNames,activeAvailabilityFilters};
@@ -602,7 +603,7 @@ class Content extends Component {
             {(this.getCurrentCategoryId() == 706 || this.getCurrentCategoryId() == 689) &&
           <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
             <Typography variant="h6" sx={{mt:3}}>
-              Andere Kategorien
+              {this.props.t ? this.props.t('navigation.otherCategories') : 'Andere Kategorien'}
             </Typography>
           </Box>
           }
@@ -647,7 +648,7 @@ class Content extends Component {
                 p: 2,
               }}>
                 <Typography sx={{ fontSize: '1.3rem', color: 'white', fontFamily: 'SwashingtonCP' }}>
-                  Seeds
+                  {this.props.t('sections.seeds')}
                 </Typography>
               </Box>
             </Box>
@@ -694,7 +695,7 @@ class Content extends Component {
                 p: 2,
               }}>
                 <Typography sx={{ fontSize: '1.3rem', color: 'white', fontFamily: 'SwashingtonCP' }}>
-                  Stecklinge
+                  {this.props.t('sections.stecklinge')}
                 </Typography>
               </Box>
             </Box>
@@ -723,4 +724,4 @@ class Content extends Component {
   }
 }
 
-export default withRouter(Content);
+export default withRouter(withI18n()(Content));