seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

feat: Wrap product carousel title in a React Router Link and add a ChevronRight icon.

Browse Source
This commit is contained in:
sebseb7
2025-12-14 10:01:37 +01:00
parent 57515bfb85
commit dbd5df28f8
1 changed files with 44 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/ProductCarousel.js
View File

@@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import { Link } from "react-router-dom";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
@@ -46,7 +47,7 @@ class ProductCarousel extends React.Component {
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
console.log("ProductCarousel componentDidUpdate", prevProps.languageContext?.currentLanguage, this.props.languageContext?.currentLanguage); console.log("ProductCarousel componentDidUpdate", prevProps.languageContext?.currentLanguage, this.props.languageContext?.currentLanguage);
if(prevProps.languageContext?.currentLanguage !== this.props.languageContext?.currentLanguage) { if (prevProps.languageContext?.currentLanguage !== this.props.languageContext?.currentLanguage) {
this.setState({ products: [] }, () => { this.setState({ products: [] }, () => {
this.loadProducts(this.props.languageContext?.currentLanguage || this.props.i18n.language); this.loadProducts(this.props.languageContext?.currentLanguage || this.props.i18n.language);
}); });
@@ -277,25 +278,41 @@ class ProductCarousel extends React.Component {
const { t, title } = this.props; const { t, title } = this.props;
const { products } = this.state; const { products } = this.state;
if(!products || products.length === 0) { if (!products || products.length === 0) {
return null; return null;
} }
return ( return (
<Box sx={{ mt: 3 }}> <Box sx={{ mt: 3 }}>
<Typography <Box
variant="h4" component={Link}
component="h2" to="/Kategorie/neu"
sx={{ sx={{
mb: 2, display: "flex",
fontFamily: "SwashingtonCP", alignItems: "center",
justifyContent: "center",
textDecoration: "none",
color: "primary.main", color: "primary.main",
textAlign: "center", mb: 2,
textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)" transition: "all 0.3s ease",
"&:hover": {
transform: "translateX(5px)",
color: "primary.dark"
}
}} }}
> >
{title || t('product.new')} <Typography
</Typography> variant="h4"
component="span"
sx={{
fontFamily: "SwashingtonCP",
textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)"
}}
>
{title || t('product.new')}
</Typography>
<ChevronRight sx={{ fontSize: "2.5rem", ml: 1 }} />
</Box>
<div <div
className="product-carousel-wrapper" className="product-carousel-wrapper"