89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
import { Badge, Button } from "antd";
|
|
import CartIcon from "components/Icons/cart/CartIcon";
|
|
import ProText from "components/ProText";
|
|
import { selectCartItems } from "features/order/orderSlice";
|
|
import useBreakPoint from "hooks/useBreakPoint";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link, useParams } from "react-router-dom";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import { colors, ProBlack2 } from "ThemeConstants";
|
|
|
|
export function MenuFooter() {
|
|
const items = useAppSelector(selectCartItems);
|
|
const { themeName } = useAppSelector((state) => state.theme);
|
|
const { isMobile, isTablet } = useBreakPoint();
|
|
const { t } = useTranslation();
|
|
const { id } = useParams();
|
|
|
|
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: "80px",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-around",
|
|
gap: "1rem",
|
|
zIndex: 999,
|
|
backgroundColor: themeName === "light" ? "white" : ProBlack2,
|
|
}}
|
|
>
|
|
<Link
|
|
to={`/${id}/cart`}
|
|
style={{
|
|
width: "100%",
|
|
padding: "0 16px",
|
|
}}
|
|
>
|
|
<Button
|
|
type="primary"
|
|
shape="round"
|
|
style={{
|
|
width: "100%",
|
|
height: 50,
|
|
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: 4,
|
|
}}
|
|
>
|
|
<CartIcon />
|
|
</span>
|
|
</Badge>
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|