80 lines
3.4 KiB
TypeScript
80 lines
3.4 KiB
TypeScript
|
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
|||
|
|
|
|||
|
|
import CustomButton from "./CustomButton";
|
|||
|
|
|
|||
|
|
export default function TotalPrice() {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
|||
|
|
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,
|
|||
|
|
}}
|
|||
|
|
>6 380 руб.</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<CustomButton
|
|||
|
|
variant="contained"
|
|||
|
|
sx={{
|
|||
|
|
mt: "25px",
|
|||
|
|
backgroundColor: theme.palette.brightPurple.main,
|
|||
|
|
}}
|
|||
|
|
>Выбрать</CustomButton>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
)
|
|||
|
|
}
|