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

21
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,8 +12,18 @@ type UserTabProps = {
}; };
}; };
export const UserTab = ({ user }: UserTabProps) => ( export const UserTab = ({ user }: UserTabProps) => {
<Box sx={{ display: "flex", columnGap: "15px", padding: "25px" }}> 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={{ maxWidth: "300px", width: "100%" }}>
<Box sx={{ marginBottom: "25px" }}> <Box sx={{ marginBottom: "25px" }}>
<Typography sx={{ lineHeight: "20px" }}>ID</Typography> <Typography sx={{ lineHeight: "20px" }}>ID</Typography>
@ -55,7 +65,9 @@ export const UserTab = ({ user }: UserTabProps) => (
</Typography> </Typography>
</Box> </Box>
<Box sx={{ marginBottom: "25px" }}> <Box sx={{ marginBottom: "25px" }}>
<Typography sx={{ lineHeight: "20px" }}>Внутренний кошелек</Typography> <Typography sx={{ lineHeight: "20px" }}>
Внутренний кошелек
</Typography>
<Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}> <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
{user.walletBalance} {user.walletBalance}
</Typography> </Typography>
@ -63,3 +75,4 @@ export const UserTab = ({ user }: UserTabProps) => (
</Box> </Box>
</Box> </Box>
); );
};