Initial commit

src/pages/menu/components/MenuFooter/MenuFooter.tsx

@@ -0,0 +1,92 @@
+import { Badge, Button, Grid } from "antd";
+import CartIcon from "components/Icons/cart/CartIcon";
+import ProText from "components/ProText";
+import { selectCartItems } from "features/order/orderSlice";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { useAppSelector } from "redux/hooks";
+import { colors, ProBlack2 } from "ThemeConstants";
+
+const { useBreakpoint } = Grid;
+
+export function MenuFooter() {
+  const items = useAppSelector(selectCartItems);
+  const restaurantName = localStorage.getItem("restaurantName");
+  const { themeName } = useAppSelector((state) => state.theme);
+  const { xs, sm } = useBreakpoint();
+  const isMobile = xs;
+  const isTablet = sm && !xs;
+  const { t } = useTranslation();
+
+  const totalItems = items.reduce((sum, item) => sum + item.quantity, 0);
+
+  return (
+    <>
+      {(isMobile || isTablet) && (
+        <div
+          style={{
+            width: "100%",
+            padding: "16px 16px 0",
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            height: "10vh",
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-around",
+            gap: "1rem",
+            zIndex: 999,
+            backgroundColor: themeName === "light" ? "white" : ProBlack2,
+          }}
+        >
+          <Link
+            to={`/${restaurantName}/cart`}
+            style={{
+              width: "100%",
+              padding: "0 16px",
+            }}
+          >
+            <Button
+              type="primary"
+              shape="round"
+              style={{
+                width: "100%",
+                height: 48,
+                marginBottom: 16,
+                boxShadow: "none",
+              }}
+            >
+              <Badge
+                count={totalItems}
+                size="default"
+                style={{
+                  borderColor: colors.primary,
+                  color: "white",
+                  fontSize: isMobile ? 10 : 12,
+                  width: isMobile ? 10 : 12,
+                }}
+              >
+                <ProText
+                  style={{
+                    color: "white",
+                    margin: "0 10px",
+                  }}
+                >
+                  {t("menu.viewCart")}
+                </ProText>
+                <span
+                  style={{
+                    position: "relative",
+                    top: 2,
+                  }}
+                >
+                  <CartIcon />
+                </span>
+              </Badge>
+            </Button>
+          </Link>
+        </div>
+      )}
+    </>
+  );
+}