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 = {
user: {
@ -12,54 +12,67 @@ type UserTabProps = {
};
};
export const UserTab = ({ user }: UserTabProps) => (
<Box sx={{ display: "flex", 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>
export const UserTab = ({ user }: UserTabProps) => {
const theme = useTheme();
const mobile = useMediaQuery(theme.breakpoints.down(700));
return (
<Box
sx={{
display: mobile ? "block" : "flex",
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 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 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>
<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>
);
);
};