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>
+  );
+}