added some translations

01-frontend/public/locales/de/translation.json

@@ -1,3 +1,11 @@
 {
-  "ratingFrom": "Bewertung vom"
+  "almostSoldOut": "Fast ausverkauft",
+  "available": "verfügbar",
+  "freeShipping": "Kostenloser Versand ab 50€ Bestellwert",
+  "inStock": "Verfügbar",
+  "outOfStock": "Ausverkauft",
+  "rateThisProduct": "Dieses Produkt bewerten",
+  "ratingFrom": "Bewertung vom",
+  "review": "Produktrezension (optional)",
+  "search": "Suchen..."
 }

01-frontend/public/locales/en/translation.json

@@ -1,3 +1,11 @@
 {
-  "ratingFrom": "Rating from"
+  "almostSoldOut": "Almost sold out",
+  "available": "available",
+  "freeShipping": "Free shipping for orders over 50€",
+  "inStock": "In stock",
+  "outOfStock": "Out of stock",
+  "rateThisProduct": "Rate this product",
+  "ratingFrom": "Rating from",
+  "review": "Product review (optional)",
+  "search": "Search..."
 }

01-frontend/src/helper/homepage/ItemCard.tsx

@@ -4,8 +4,11 @@ import { useNavigate } from "react-router-dom";
 import Item from "../../components/Item";
 import { useBasket } from "../BasketProvider";
 import "../helper.css";
+import {useTranslation} from 'react-i18next';
 
 export default function ItemCard({ item }: { item: Item }) {
+
+    const { t } = useTranslation();
     const navigate = useNavigate()
     const { addToBasket } = useBasket();
 
@@ -42,15 +45,15 @@ export default function ItemCard({ item }: { item: Item }) {
                         
                         {item.stock > 10 ? (
                             <Typography variant="body2">
-                                In Stock
+                                {t('inStock')}
                             </Typography>
                         ) : item.stock > 0 ?(
                             <Typography variant="body2" sx={{ color: 'orange' }}>
-                                Almost Sold Out
+                                {t('almostSoldOut')}
                             </Typography>
                         ) : (
                             <Typography variant="body2" sx={{ color: 'red' }}>
-                                Out of Stock
+                                {t('outOfStock')}
                             </Typography>
                         )}
                     </CardContent>

01-frontend/src/helper/navbar/NavBar.tsx

@@ -15,6 +15,7 @@ import AdbIcon from '@mui/icons-material/Adb';
 import { alpha, InputBase, styled } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import { useNavigate } from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
 import './NavBar.css';
 
 const pages = ['Categories', 'Checkout', 'Contact'];
@@ -63,6 +64,8 @@ const Search = styled('div')(({ theme }) => ({
   }));
 
 export default function NavBar() {
+
+    const { t } = useTranslation();
     const navigate = useNavigate();
     const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
     const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null);
@@ -113,7 +116,7 @@ export default function NavBar() {
                             <SearchIcon sx={{color: 'white'}}/>
                         </SearchIconWrapper>
                         <StyledInputBase
-                            placeholder="Search…"
+                            placeholder={t('search')}
                             inputProps={{ 'aria-label': 'search' }}
                         />
                     </Search>

01-frontend/src/helper/productpage/ProductInfo.tsx

@@ -3,8 +3,11 @@ import Item from "../../components/Item";
 import React, { useState } from "react";
 import { Close, LocalShipping, ShoppingCart } from "@mui/icons-material";
 import { useBasket } from "../BasketProvider";
+import {useTranslation} from "react-i18next";
 
 export default function ProductInfo({ item }: { item: Item }) {
+
+    const { t } = useTranslation();
     const [quantity, setQuantity] = useState<number>(1);
     const [open, setOpen] = useState<boolean>(false);
     const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 });
@@ -114,12 +117,12 @@ export default function ProductInfo({ item }: { item: Item }) {
                 <Box>
                     {item.stock > 10 ? (
                         <Alert severity="success" variant='outlined'>
-                            In Stock ({item.stock} available)
+                            {t('inStock')} ({item.stock} {t('available')})
                         </Alert>
                     ) : item.stock > 0 ? (
-                        <Alert severity="warning" variant='outlined'>Almost sold out ({item.stock} available)</Alert>
+                        <Alert severity="warning" variant='outlined'>{t('almostSoldOut')} ({item.stock} {t('available')})</Alert>
                     ) : (
-                        <Alert severity="error" variant='filled'>Out of Stock</Alert>
+                        <Alert severity="error" variant='filled'>{t('outOfStock')}</Alert>
                     )}
                 </Box>
 
@@ -147,7 +150,7 @@ export default function ProductInfo({ item }: { item: Item }) {
                 <Box sx={{ mt: 2 }}>
                     <Typography variant="body2" color="text.secondary">
                         <LocalShipping sx={{ mr: 1, verticalAlign: 'middle' }} />
-                        Free shipping on orders over €50
+                        {t('freeShipping')}
                     </Typography>
                 </Box>
 

01-frontend/src/helper/productpage/Ratings.tsx

@@ -3,9 +3,11 @@ import RatingCard from "./RatingCard";
 import RatingType from "../../components/Rating";
 import React, { useState } from "react";
 import { Close } from "@mui/icons-material";
+import {useTranslation} from 'react-i18next';
 
 export default function Ratings() {
 
+    const { t } = useTranslation();
     const [open, setOpen] = useState<boolean>(false);
 
     const handleClose = (
@@ -66,10 +68,10 @@ export default function Ratings() {
             </div>
             <div className="rating-card-body">
                 <Typography variant="h5">
-                    Rate this product:</Typography>
+                    {t('rateThisProduct')}:</Typography>
                 <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
                 <TextField
-                    label="Rating text (optional)"
+                    label={t('review')}
                     multiline
                     minRows={4}
                     maxRows={16}