PenaSide/adminFront
3
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: UserTab mobile styles

Browse Source
This commit is contained in:
IlyaDoronin 2023-07-26 13:49:08 +03:00
parent d0af063172
commit 89d44b64fd
1 changed files with 62 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/pages/dashboard/ModalUser/UserTab.tsx
View File

@ -1,4 +1,4 @@
import { Box, Typography } from "@mui/material"; import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";
type UserTabProps = { type UserTabProps = {
user: { user: {
@ -12,54 +12,67 @@ type UserTabProps = {
}; };
}; };
export const UserTab = ({ user }: UserTabProps) => ( export const UserTab = ({ user }: UserTabProps) => {
<Box sx={{ display: "flex", columnGap: "15px", padding: "25px" }}> const theme = useTheme();
<Box sx={{ maxWidth: "300px", width: "100%" }}> const mobile = useMediaQuery(theme.breakpoints.down(700));
<Box sx={{ marginBottom: "25px" }}>
<Typography sx={{ lineHeight: "20px" }}>ID</Typography> return (
<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}> <Box
{" "} sx={{
{user.id} display: mobile ? "block" : "flex",
</Typography> columnGap: "15px",
padding: "25px",
}}
>
<Box sx={{ maxWidth: "300px", width: "100%" }}>
<Box sx={{ marginBottom: "25px" }}>
<Typography sx={{ lineHeight: "20px" }}>ID</Typography>
<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
{" "}
{user.id}
</Typography>
</Box>
<Box sx={{ marginBottom: "25px" }}>
<Typography sx={{ lineHeight: "20px" }}>Дата регистрации</Typography>
<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
{user.registrationDate}
</Typography>
</Box>
<Box sx={{ marginBottom: "25px" }}>
<Typography sx={{ lineHeight: "20px" }}>Email</Typography>
<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
{user.email}
</Typography>
</Box>
<Box sx={{ marginBottom: "25px" }}>
<Typography sx={{ lineHeight: "20px" }}>Телефон</Typography>
<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
{user.phone}
</Typography>
</Box>
<Box sx={{ marginBottom: "25px" }}>
<Typography sx={{ lineHeight: "20px" }}>Тип:</Typography>
<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
{user.type}
</Typography>
</Box>
</Box> </Box>
<Box sx={{ marginBottom: "25px" }}> <Box sx={{ maxWidth: "300px", width: "100%" }}>
<Typography sx={{ lineHeight: "20px" }}>Дата регистрации</Typography> <Box sx={{ marginBottom: "25px" }}>
<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}> <Typography sx={{ lineHeight: "20px" }}>ФИО:</Typography>
{user.registrationDate} <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
</Typography> {user.fullname}
</Box> </Typography>
<Box sx={{ marginBottom: "25px" }}> </Box>
<Typography sx={{ lineHeight: "20px" }}>Email</Typography> <Box sx={{ marginBottom: "25px" }}>
<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}> <Typography sx={{ lineHeight: "20px" }}>
{user.email} Внутренний кошелек
</Typography> </Typography>
</Box> <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
<Box sx={{ marginBottom: "25px" }}> {user.walletBalance}
<Typography sx={{ lineHeight: "20px" }}>Телефон</Typography> </Typography>
<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}> </Box>
{user.phone}
</Typography>
</Box>
<Box sx={{ marginBottom: "25px" }}>
<Typography sx={{ lineHeight: "20px" }}>Тип:</Typography>
<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
{user.type}
</Typography>
</Box> </Box>
</Box> </Box>
<Box sx={{ maxWidth: "300px", width: "100%" }}> );
<Box sx={{ marginBottom: "25px" }}> };
<Typography sx={{ lineHeight: "20px" }}>ФИО:</Typography>
<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
{user.fullname}
</Typography>
</Box>
<Box sx={{ marginBottom: "25px" }}>
<Typography sx={{ lineHeight: "20px" }}>Внутренний кошелек</Typography>
<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
{user.walletBalance}
</Typography>
</Box>
</Box>
</Box>
);