fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

YouMightAlsoLike: enhnace UI + styles

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2026-01-01 12:14:02 +03:00
parent 3b0b8ceab6
commit a6abb089d2
9 changed files with 177 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx
View File

@@ -1,10 +1,8 @@
import { PlusOutlined } from "@ant-design/icons";
import { Space } from "antd";
import ArabicPrice from "components/ArabicPrice";
import BackIcon from "components/Icons/BackIcon";
import NextIcon from "components/Icons/NextIcon";
import ImageWithFallback from "components/ImageWithFallback";
import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons.tsx";
import ProText from "components/ProText.tsx";
import { menuItems } from "data/menuItems.ts";
import { addItem } from "features/order/orderSlice.ts";
@@ -12,10 +10,10 @@ import useBreakPoint from "hooks/useBreakPoint";
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
import { colors } from "ThemeConstants.ts";
import { default_image } from "utils/constants.ts";
import { Product } from "utils/types/appTypes.ts";
import styles from "./YouMayAlsoLike.module.css";
import ProInputCard from "components/ProInputCard/ProInputCard";
export default function YouMightAlsoLike() {
const { t } = useTranslation();
@@ -182,114 +180,98 @@ export default function YouMightAlsoLike() {
</button>
)}
<div ref={containerRef} className={styles.youMightAlsoLikeContainer}>
{menuItems.map((item: Product) => (
<div key={item.id}>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "space-between",
width: isMobile ? "120px" : isTablet ? "120px" : "140px",
position: "relative",
overflow: "hidden",
}}
>
<ProInputCard
title={t("cart.youMightAlsoLike")}
dividerStyle={{ margin: "3px 0 16px 0" }}
>
<div className={styles.youMightAlsoLikeContainer}>
{menuItems.map((item: Product) => (
<div key={item.id}>
<div
style={{
width: isMobile ? 28 : 24,
height: isMobile ? 28 : 24,
borderRadius: "50%",
top: isMobile ? 65 : isTablet ? 60 : 80,
position: "absolute",
[isRTL ? "left" : "right"]: isMobile ? 10 : 20,
display: "flex",
flexDirection: "row",
justifyContent: "center",
cursor: "pointer",
backgroundColor: "white",
zIndex: 999,
flexDirection: "column",
justifyContent: "space-between",
position: "relative",
overflow: "hidden",
}}
>
<PlusOutlined
onClick={(e) => {
e.stopPropagation();
handleQuickAdd(item);
}}
<div
style={{
color: colors.primary,
fontSize: isMobile ? 14 : 16,
width: isMobile ? 28 : 24,
height: isMobile ? 28 : 24,
borderRadius: "50%",
top: isMobile ? 65 : isTablet ? 60 : 80,
position: "absolute",
[isRTL ? "left" : "right"]: isMobile ? 3 : 20,
display: "flex",
flexDirection: "row",
justifyContent: "center",
cursor: "pointer",
backgroundColor: "white",
zIndex: 999,
}}
/>
</div>
<ImageWithFallback
src={item.image}
alt={item.name}
className={`${styles.popularMenuItemImage} ${
isMobile
? styles.popularMenuItemImageMobile
: isTablet
? styles.popularMenuItemImageTablet
: styles.popularMenuItemImageDesktop
}`}
width={isMobile ? 106 : isTablet ? 90 : 110}
height={isMobile ? 96 : isTablet ? 90 : 110}
fallbackSrc={default_image}
/>
<Space
direction="vertical"
size="small"
style={{
flex: 1,
rowGap: 0,
}}
>
<div style={{ height: 25 }}>
<ProText
style={{
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
padding: isMobile ? 3 : isTablet ? "0 8px" : "0 10px",
fontSize: isMobile ? 12 : isTablet ? 14 : 16,
width: isMobile ? 80 : isTablet ? 100 : 120,
display: "inline-block",
fontWeight: 500,
fontStyle: "Medium",
lineHeight: "140%",
letterSpacing: "0%",
marginTop: 8,
>
<PlusOutlined
onClick={(e) => {
e.stopPropagation();
handleQuickAdd(item);
}}
>
{item.name}
</ProText>
style={{
color: "#302E3E",
fontSize: isMobile ? 14 : 16,
}}
/>
</div>
<ImageWithFallback
src={item.image}
alt={item.name}
className={`${styles.popularMenuItemImage} ${
isMobile
? styles.popularMenuItemImageMobile
: isTablet
? styles.popularMenuItemImageTablet
: styles.popularMenuItemImageDesktop
}`}
width={isMobile ? 106 : isTablet ? 90 : 110}
height={isMobile ? 96 : isTablet ? 90 : 110}
fallbackSrc={default_image}
/>
<ArabicPrice
price={item.price}
textStyle={{
fontWeight: 500,
fontStyle: "Medium",
fontSize: 12,
lineHeight: "140%",
letterSpacing: "0%",
padding: isRTL ? "8px 2px 0 0" : "8px 0 0 2px",
color: "#595764",
}}
/>
<ProText
style={{
margin: 0,
WebkitLineClamp: 1,
WebkitBoxOrient: "vertical",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
padding: isMobile ? 3 : isTablet ? "0 8px" : "0 10px",
fontSize: isMobile ? 12 : isTablet ? 14 : 16,
width: isMobile ? 80 : isTablet ? 100 : 120,
fontWeight: 600,
fontStyle: "SemiBold",
lineHeight: "140%",
letterSpacing: "0%",
marginTop: 4,
}}
/>
</Space>
>
{item.name}
</ProText>
</div>
</div>
</div>
))}
</div>
))}
</div>
</ProInputCard>
</div>
</>
);