cart refactor code

src/pages/cart/components/cartFooter/CartFooter.tsx

@@ -0,0 +1,61 @@
+import { colors } from "ThemeConstants.ts";
+import { Link, useParams } from "react-router-dom";
+import { Button } from "antd";
+import { useAppSelector } from "redux/hooks.ts";
+import useBreakPoint from "hooks/useBreakPoint.ts";
+import { useTranslation } from "react-i18next";
+import { selectCart } from "features/order/orderSlice.ts";
+import styles from "./footer.module.css";
+
+export default function CartFooter() {
+  const { t } = useTranslation();
+  const { items } = useAppSelector(selectCart);
+  const { id } = useParams();
+  const { isMobile, isTablet } = useBreakPoint();
+  const orderType = localStorage.getItem("orderType");
+
+  return (
+    <div className={styles.cartFooter}>
+      <Link
+        to={`/${id}/menu?${orderType ? `orderType=${orderType}` : ""}`}
+        style={{
+          width: "100%",
+        }}
+      >
+        <Button
+          style={{
+            borderRadius: 100,
+            height: isMobile ? 48 : isTablet ? 56 : 64,
+            borderColor: "black",
+            width: "100%",
+            fontSize: 16,
+          }}
+        >
+          {t("cart.addItem")}
+        </Button>
+      </Link>
+
+      <Link
+        to={`/${id}/checkout`}
+        style={{
+          width: "100%",
+        }}
+      >
+        <Button
+          style={{
+            backgroundColor: colors.primary,
+            borderRadius: 100,
+            height: isMobile ? 48 : isTablet ? 56 : 64,
+            borderColor: "#F2F2F2",
+            fontSize: 16,
+            color: "white",
+            width: "100%",
+          }}
+          disabled={items.length === 0}
+        >
+          {t("cart.checkout")}
+        </Button>
+      </Link>
+    </div>
+  );
+}

src/pages/cart/components/cartFooter/footer.module.css

@@ -0,0 +1,23 @@
+.cartFooter {
+  width: 100%;
+  padding: 16px 16px 0;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  height: 10vh;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  gap: 1rem;
+  background-color: var(--background);
+  box-shadow: none;
+}
+/* :global(.darkApp) .cartFooter {
+  background-color: var(--background) !important;
+} */
+@media (min-width: 992px) {
+  .cartFooter {
+    position: absolute;
+    height: 12vh;
+  }
+}