cart: move "you may like" to a folder

src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx

@@ -0,0 +1,170 @@
+import { PlusOutlined } from "@ant-design/icons";
+import { Grid, Space } from "antd";
+import ArabicPrice from "components/ArabicPrice";
+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";
+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 "pages/cart/cart.module.css";
+
+const { useBreakpoint } = Grid;
+
+export default function YouMightAlsoLike() {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const { sm, md } = useBreakpoint();
+  const isMobile = !sm;
+  const isTablet = sm && !md;
+  const handleQuickAdd = (item: Product) => {
+    dispatch(
+      addItem({
+        item: {
+          id: Number(item.id),
+          name: item.name,
+          price: item.price,
+          image: item.image,
+          description: item.description,
+          variant: "None",
+        },
+        quantity: 1,
+      }),
+    );
+  };
+
+  return (
+    <>
+      <div style={{ marginBottom: 16 }}>
+        <ProText
+          strong
+          style={{
+            fontSize: isMobile ? 18 : isTablet ? 18 : 20,
+          }}
+        >
+          {t("cart.youMightAlsoLike")}
+        </ProText>
+      </div>
+
+      <div className={`${styles.youMightAlsoLikeContainer} responsive-grid`}>
+        {menuItems.map((item: Product) => (
+          <div key={item.id}>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: isMobile ? "95px" : isTablet ? "120px" : "140px",
+                position: "relative",
+                height: 155,
+                overflow: "hidden",
+              }}
+            >
+              <div
+                style={{
+                  width: isMobile ? 18 : 24,
+                  height: isMobile ? 18 : 24,
+                  borderRadius: "50%",
+                  top: isMobile ? 50 : 80,
+                  position: "absolute",
+                  right: isMobile ? 15 : 20,
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "center",
+                  cursor: "pointer",
+                  backgroundColor: "white",
+                  zIndex: 999,
+                }}
+              >
+                <PlusOutlined
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleQuickAdd(item);
+                  }}
+                  style={{
+                    color: colors.primary,
+                    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 ? 73 : isTablet ? 90 : 110}
+                height={isMobile ? 73 : isTablet ? 90 : 110}
+                fallbackSrc={default_image}
+              />
+
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "start",
+                  marginTop: 5,
+                  ...(isRTL ? { marginRight: -20 } : { marginLeft: -10 }),
+                }}
+              >
+                <ItemDescriptionIcons className={styles.itemDescriptionIcons} />
+              </div>
+
+              <Space
+                direction="vertical"
+                size="small"
+                style={{
+                  flex: 1,
+                  rowGap: 0,
+                  height: 40,
+                }}
+              >
+                <div style={{ height: 25 }}>
+                  <ProText
+                    style={{
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      padding: 3,
+                      fontSize: isMobile ? 12 : isTablet ? 14 : 16,
+                      width: isMobile ? 80 : isTablet ? 100 : 120,
+                      display: "inline-block",
+                      fontWeight: 600,
+                    }}
+                  >
+                    {item.name}
+                  </ProText>
+                </div>
+
+                <ArabicPrice
+                  price={item.price}
+                  style={{
+                    margin: 0,
+                    WebkitLineClamp: 1,
+                    WebkitBoxOrient: "vertical",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    padding: 3,
+                    fontSize: isMobile ? 12 : isTablet ? 14 : 16,
+                    fontWeight: 500,
+                  }}
+                />
+              </Space>
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}