adminFront/src/pages/dashboard/ModalUser/UserTab.tsx

import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";

export const UserTab = () => {
  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" }}>
            {" "}
            2810
          </Typography>
        </Box>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>Дата регистрации</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            17.02.2023
          </Typography>
        </Box>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>Email</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            emailexamle@gmail.com
          </Typography>
        </Box>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>Телефон</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            +7 123 456 78 90
          </Typography>
        </Box>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>Тип:</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            НКО
          </Typography>
        </Box>
      </Box>
      <Box sx={{ maxWidth: "300px", width: "100%" }}>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>ФИО:</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            Куликов Геннадий Викторович
          </Typography>
        </Box>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>
            Внутренний кошелек
          </Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            2 096 руб.
          </Typography>
        </Box>
      </Box>
    </Box>
  );
};