feat(ui): add product detail view button to Extras and Product selectors

Enhance the ExtrasSelector and ProductSelector components by introducing a button that links to detailed product views. The button features a ZoomInIcon and is styled for a consistent user experience. This addition improves navigation and accessibility for users seeking more information on products.

src/pages/GrowTentKonfigurator.js

@@ -13,10 +13,14 @@ import {
   Grid,
   CardMedia,
   CircularProgress,
+  Stack,
 } from '@mui/material';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { TentShapeSelector, ExtrasSelector } from '../components/configurator/index.js';
 import { tentShapes } from '../data/configuratorData.js';
+import { Link } from 'react-router-dom';
+import IconButton from '@mui/material/IconButton';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
 
 function setCachedCategoryData(categoryId, data) {
   if (!window.productCache) {
@@ -800,6 +804,18 @@ class GrowTentKonfigurator extends Component {
                       ✓ Ausgewählt
                     </Typography>
                   )}
+                  <Stack direction="row" spacing={1} justifyContent="center">
+                    <IconButton
+                      component={Link}
+                      to={`/Artikel/${product.seoName}`}
+                      size="small"
+                      aria-label="Produktdetails anzeigen"
+                      sx={{ mr: 1, color: 'text.secondary' }}
+                      onClick={(event) => event.stopPropagation()}
+                    >
+                      <ZoomInIcon />
+                    </IconButton>
+                  </Stack>
                 </Box>
               </Box>
             </Grid>
@@ -927,6 +943,18 @@ class GrowTentKonfigurator extends Component {
                       ✓ Ausgewählt
                     </Typography>
                   )}
+                  <Stack direction="row" spacing={1} justifyContent="center">
+                    <IconButton
+                      component={Link}
+                      to={`/Artikel/${lamp.seoName}`}
+                      size="small"
+                      aria-label="Produktdetails anzeigen"
+                      sx={{ mr: 1, color: 'text.secondary' }}
+                      onClick={(event) => event.stopPropagation()}
+                    >
+                      <ZoomInIcon />
+                    </IconButton>
+                  </Stack>
                 </Box>
               </Box>
             </Grid>
@@ -1092,6 +1120,18 @@ class GrowTentKonfigurator extends Component {
                       ✓ Ausgewählt
                     </Typography>
                   )}
+                  <Stack direction="row" spacing={1} justifyContent="center">
+                    <IconButton
+                      component={Link}
+                      to={`/Artikel/${ventilation.seoName}`}
+                      size="small"
+                      aria-label="Produktdetails anzeigen"
+                      sx={{ mr: 1, color: 'text.secondary' }}
+                      onClick={(event) => event.stopPropagation()}
+                    >
+                      <ZoomInIcon />
+                    </IconButton>
+                  </Stack>
                 </Box>
               </Box>
             </Grid>