front-hub/src/pages/Wallet.tsx

import { Box, Typography, useTheme } from "@mui/material";
import CustomButton from "../components/CustomButton";
import WalletIcon from "../components/WalletIcon";
import SectionWrapper from "../components/SectionWrapper";


export default function Wallet() {
    const theme = useTheme();

    return (
        <SectionWrapper
            maxWidth="lg"
            sx={{
                mt: "25px",
                mb: "70px",
            }}
        >
            <Typography
                sx={{
                    fontWeight: 400,
                    fontSize: "12px",
                    lineHeight: "14px",
                    color: theme.palette.grey2.main,
                }}
            >
                {`Все тарифы — `}
                <Typography
                    component="span"
                    sx={{
                        fontWeight: 400,
                        fontSize: "12px",
                        lineHeight: "14px",
                        color: theme.palette.fadePurple.main,
                        textUnderlinePosition: "under",
                        textDecorationColor: theme.palette.brightPurple.main,
                    }}
                >Мой кошелёк</Typography>
            </Typography>
            <Typography variant="h4" sx={{ mt: "20px", mb: "40px" }}>Мой кошелёк</Typography>
            <Box
                sx={{
                    backgroundColor: "white",
                    display: "flex",
                    gap: "9%",
                    borderRadius: "12px",
                    boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
                                0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
                                0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 
                                0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
                                0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
                                0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
                }}
            >
                <Box
                    sx={{
                        width: "59.5%",
                        p: "20px",
                    }}
                >
                    <Typography sx={{ color: theme.palette.grey3.main, mb: "30px" }}>Баланс 10.04.2022</Typography>
                    <Box
                        sx={{
                            display: "flex",
                            alignItems: "center",
                            gap: "22px",
                            mb: "40px",
                        }}
                    >
                        <WalletIcon bgcolor="#FEDFD0" color={theme.palette.orange.main} />
                        <Typography variant="h5">10 304 руб.</Typography>
                    </Box>
                    <Box
                        component="ol"
                        sx={{
                            color: theme.palette.grey2.main,
                            borderTop: `1px solid ${theme.palette.grey2.main}`,
                            pt: "10px",
                            pl: "25px",
                            mt: 0,
                            mb: "3px",
                        }}
                    >
                        <Typography
                            component="li"
                            sx={{
                                fontSize: "16px",
                                lineHeight: "20px",
                                fontWeight: 400,
                            }}
                        >
                            Текст для сносок: текст-заполнитель —
                            это текст, который имеет текст-заполнитель —
                            это текст, который имеет
                        </Typography>
                        <Typography
                            component="li"
                            sx={{
                                fontSize: "16px",
                                lineHeight: "20px",
                                fontWeight: 400,
                            }}
                        >
                            Текст для сносок: тель —
                            это текст, который имеет текст-заполнитель —
                            это текст, который имеет
                        </Typography>
                    </Box>
                </Box>
                <Box
                    sx={{
                        display: "flex",
                        flexDirection: "column",
                        justifyContent: "space-between",
                        alignItems: "start",
                        color: theme.palette.grey3.main,
                        width: "31.5%",
                        p: "20px",
                        pl: "33px",
                        borderLeft: `1px solid ${theme.palette.grey2.main}`,
                    }}
                >
                    <Box
                        sx={{
                            display: "flex",
                            flexDirection: "column",
                            gap: "22px",
                            maxWidth: "85%",
                        }}
                    >
                        <Typography>
                            Текст-заполнитель —
                            это текст, который имеет
                        </Typography>
                        <Typography>
                            Текст-заполнитель —
                            это текст, который имеет
                        </Typography>
                    </Box>
                    <CustomButton
                        variant="contained"
                        sx={{
                            backgroundColor: theme.palette.brightPurple.main,
                            textColor: "white",
                        }}
                    >Пополнить</CustomButton>
                </Box>
            </Box>
        </SectionWrapper>
    );
}