ExclusiveOffers swiper:
export const ExclusiveOffers = () => {
const theme = useTheme();
const { category } = useParams();
const { data, isLoading } = useGetProductsQuery(category);
const memoizedProducts = useMemo(
() =>
Array.isArray(data?.data) &&
data.data.filter((product: Product) => product.productId < 7),
[data]
);
return (
<Box display="flex" flexDirection="column" gap="2rem">
<Box display="flex" alignItems="center" justifyContent="space-between">
<Typography variant="h2">Exclusive Offers</Typography>
<Typography
variant="subtitle1"
component={Link}
to={`/${category}/all`}
sx={{ color: theme.palette.primary.main, cursor: "pointer" }}
>
See all
</Typography>
</Box>
<Box className="container-two">
<Swiper
cssMode={true}
mousewheel={true}
keyboard={true}
spaceBetween={10}
modules={[Navigation, Pagination, Mousewheel, Keyboard]}
className="swiper-container"
>
{!isLoading ? (
memoizedProducts.map((product: Product) => (
<SwiperSlide>
<ProductCard
key={product.productId}
product={product}
isLoading={isLoading}
/>
</SwiperSlide>
))
) : (
<>
{Array.from({ length: 7 }).map((_, index) => (
<SwiperSlide>
<ProductCard key={index} isLoading={isLoading} />
</SwiperSlide>
))}
</>
)}
</Swiper>
</Box>
</Box>
);
};
AllProductsPage:
export const AllProductsPage = () => {
const { category } = useParams();
const { data, isLoading } = useGetProductsQuery(category);
return (
<Box
display="flex"
flexWrap="wrap"
justifyContent="center"
gap="10px"
marginTop={10}
padding={{
xs: "0 16px 48px 16px",
sm: "0 24px 48px 24px",
md: "0 48px 48px 48px",
}}
>
{!isLoading ? (
data.data.map((product: Product) => (
<Box
key={product.productId}
width={{
xs: "216px !important",
md: "224px !important",
}}
height={{
xs: "269.46px !important",
md: "289.46px !important",
}}
padding="1rem 1rem 1rem 1rem"
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="space-between"
borderRadius="1rem"
bgcolor="#ffffff"
sx={{ cursor: "pointer" }}
>
<ProductCard
key={product.productId}
product={product}
isLoading={isLoading}
/>
</Box>
))
) : (
<>
{Array.from({ length: 10 }).map((_, index) => (
<Box
key={index}
width={{
xs: "216px !important",
md: "224px !important",
}}
height={{
xs: "269.46px !important",
md: "289.46px !important",
}}
padding="1rem 1rem 1rem 1rem"
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="space-between"
borderRadius="1rem"
bgcolor="#ffffff"
sx={{ cursor: "pointer" }}
>
<ProductCard key={index} isLoading={isLoading} />
</Box>
))}
</>
)}
</Box>
);
};
ProductCard:
export const ProductCard = ({ product, isLoading }: ProductCardProps) => {
return (
<>
{!isLoading ? (
<>
<Box
component="img"
src={product?.imgURL}
alt="product"
width={{ xs: 130, sm: 150 }}
height={{ xs: 130, sm: 150 }}
/>
<Box>
<Typography
variant="h2"
fontSize="1.2rem !important"
textAlign="center"
>
{product?.name}
</Typography>
<Typography
variant="subtitle1"
fontSize="13.5px !important"
textAlign="center"
>
{product?.quantity}pcs, Pricetag
</Typography>
</Box>
<Box
width="100%"
display="flex"
alignItems="center"
justifyContent="space-between"
>
<Typography variant="h2" fontSize="1.2rem !important">
${product?.price}
</Typography>
<Button
sx={{
minWidth: "1.8rem",
maxWidth: "1.8rem",
height: "1.8rem",
borderRadius: "0.3rem",
}}
>
<AddIcon sx={{ fontSize: "1.2rem" }} />
</Button>
</Box>
</>
) : (
<>
<Skeleton
variant="rectangular"
animation="pulse"
sx={{
width: "100%",
height: { xs: 130, sm: 150 },
}}
/>
<Box width="100%">
<Skeleton
variant="text"
animation="pulse"
width="100%"
height={23}
/>
<Skeleton
variant="text"
animation="pulse"
width="100%"
height={23}
/>
</Box>
<Box
width="100%"
display="flex"
alignItems="center"
justifyContent="space-between"
>
<Skeleton variant="text" animation="pulse" width={52} height={23} />
</Box>
</>
)}
</>
);
};
I would like to create a single card with styles and then reuse it in page and swiper, but there is some issue with card wrapper styles when I put it inside page and SwiperSlide.
