Initial commit

src/pages/checkout/components/BriefMenu.tsx

@@ -0,0 +1,57 @@
+import { Button } from "antd";
+import ArabicPrice from "components/ArabicPrice";
+import ProInputCard from "components/ProInputCard/ProInputCard";
+import ProText from "components/ProText";
+import { selectCart } from "features/order/orderSlice";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks";
+import styles from "../../address/address.module.css";
+
+export default function BriefMenu() {
+  const { tables, items } = useAppSelector(selectCart);
+  const { t } = useTranslation();
+  const { isRTL } = useAppSelector((state) => state.locale);
+
+  const orderType = useMemo(() => localStorage.getItem("orderType"), []);
+
+  const menuItems = useMemo(
+    () =>
+      items.map((item, index) => (
+        <div key={item.id}>
+          <div className={styles.briefMenuItem}>
+            <Button
+              type="text"
+              shape="circle"
+              className={styles.quantityButton}
+            >
+              {index + 1}X
+            </Button>
+            <div>
+              <ProText className={styles.itemName}>{item.name}</ProText>
+              <br />
+              <ArabicPrice 
+                price={item.price} 
+                type="secondary"
+              />
+            </div>
+          </div>
+        </div>
+      )),
+    [items]
+  );
+
+  const cardTitle = useMemo(
+    () =>
+      orderType === "dine-in"
+        ? t("checkout.table") + " " + tables
+        : t("checkout.items"),
+    [orderType, t, tables]
+  );
+
+  return (
+    <ProInputCard title={cardTitle}>
+      <div className={styles.briefMenuContainer}>{menuItems}</div>
+    </ProInputCard>
+  );
+}