101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import { basketStore } from "@root/stores/BasketStore";
|
||
|
||
import CustomButton from "./CustomButton";
|
||
|
||
export default function TotalPrice() {
|
||
const theme = useTheme();
|
||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||
const { templ, squiz, reducer } = basketStore();
|
||
|
||
type basketStore = {
|
||
name: string;
|
||
desc: string;
|
||
id: string;
|
||
privelegeid: string;
|
||
amount: number;
|
||
price: number;
|
||
}[];
|
||
|
||
const newArray: basketStore = [].concat(Object.values(templ), Object.values(squiz), Object.values(reducer));
|
||
|
||
const sum = newArray.reduce((accamulator, { price }) => (accamulator += price), 0);
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: upMd ? "row" : "column",
|
||
mt: upMd ? "80px" : "70px",
|
||
pt: upMd ? "30px" : undefined,
|
||
borderTop: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: upMd ? "68.5%" : undefined,
|
||
pr: upMd ? "15%" : undefined,
|
||
display: "flex",
|
||
flexWrap: "wrap",
|
||
flexDirection: "column",
|
||
}}
|
||
>
|
||
<Typography variant="h4" mb={upMd ? "18px" : "30px"}>
|
||
Итоговая цена
|
||
</Typography>
|
||
<Typography color={theme.palette.grey3.main}>
|
||
Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель —
|
||
это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель
|
||
</Typography>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
color: theme.palette.grey3.main,
|
||
width: upMd ? "31.5%" : undefined,
|
||
pl: upMd ? "33px" : undefined,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: upMd ? "column" : "row",
|
||
alignItems: upMd ? "start" : "center",
|
||
mt: upMd ? "10px" : "30px",
|
||
gap: "15px",
|
||
}}
|
||
>
|
||
<Typography
|
||
color={theme.palette.orange.main}
|
||
sx={{
|
||
textDecoration: "line-through",
|
||
order: upMd ? 1 : 2,
|
||
}}
|
||
>
|
||
20 190 руб.
|
||
</Typography>
|
||
<Typography
|
||
variant="p1"
|
||
sx={{
|
||
fontWeight: 500,
|
||
fontSize: "26px",
|
||
lineHeight: "31px",
|
||
order: upMd ? 2 : 1,
|
||
}}
|
||
>
|
||
{sum} руб.
|
||
</Typography>
|
||
</Box>
|
||
<CustomButton
|
||
variant="contained"
|
||
sx={{
|
||
mt: "25px",
|
||
backgroundColor: theme.palette.brightPurple.main,
|
||
}}
|
||
>
|
||
Выбрать
|
||
</CustomButton>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|