306 lines
9.1 KiB
TypeScript
306 lines
9.1 KiB
TypeScript
import * as React from "react";
|
||
import { Box, Button } from "@mui/material";
|
||
import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
|
||
import HighlightOffOutlinedIcon from '@mui/icons-material/HighlightOffOutlined';
|
||
import CircleIcon from '@mui/icons-material/Circle';
|
||
import theme from "../../../../theme";
|
||
import { green } from '@mui/material/colors';
|
||
import Pagination from "./Pagination";
|
||
|
||
|
||
const Users: React.FC = () => {
|
||
return (
|
||
<React.Fragment>
|
||
<Box sx={{
|
||
width: "100%",
|
||
display: "flex",
|
||
justifyContent: "space-between"
|
||
}}>
|
||
<Box sx={{
|
||
border: "1px solid",
|
||
borderColor: theme.palette.grayDark.main,
|
||
width: "53%",
|
||
height: "100%",
|
||
borderRadius: "3px"
|
||
}}></Box>
|
||
|
||
<Box sx={{
|
||
width: "max(40%, 460px)",
|
||
height: "540px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
}}>
|
||
<Box sx={{
|
||
width: "100%",
|
||
border: "1px solid",
|
||
borderColor: theme.palette.grayDark.main,
|
||
borderRadius: "3px",
|
||
padding: "10px"
|
||
}}>
|
||
<Button
|
||
variant = "contained"
|
||
sx={{
|
||
backgroundColor: theme.palette.grayDark.main,
|
||
width: "100%",
|
||
height: "45px",
|
||
fontSize: "15px",
|
||
fontWeight: "normal",
|
||
textTransform: "capitalize",
|
||
"&:hover": {
|
||
backgroundColor: theme.palette.menu.main
|
||
}
|
||
}}>
|
||
Поиск
|
||
<SearchOutlinedIcon />
|
||
</Button>
|
||
<Button
|
||
variant = "text"
|
||
sx={{
|
||
width: "100%",
|
||
height: "35px",
|
||
fontSize: "14px",
|
||
fontWeight: "normal",
|
||
color: theme.palette.secondary.main,
|
||
border: "1px solid",
|
||
borderColor: theme.palette.golden.main,
|
||
borderRadius: 0,
|
||
"&:hover": {
|
||
backgroundColor: theme.palette.menu.main
|
||
}
|
||
}}>
|
||
ЗАКРЫТЬ ТИКЕТ
|
||
<HighlightOffOutlinedIcon />
|
||
</Button>
|
||
</Box>
|
||
|
||
<Box sx={{
|
||
width: "100%",
|
||
height: "350px",
|
||
border: "1px solid",
|
||
borderColor: theme.palette.grayDark.main,
|
||
borderRadius: "3px",
|
||
overflow: "auto",
|
||
overflowY: "auto",
|
||
padding: "10px"
|
||
}}>
|
||
|
||
<Box sx={{
|
||
minHeight: "70px",
|
||
display: "flex",
|
||
justifyContent: "space-between"
|
||
}}>
|
||
<Box sx={{
|
||
width: "150px",
|
||
padding: "10px",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
10.09.2022
|
||
</Box>
|
||
<Box sx={{
|
||
width: "100%",
|
||
padding: "10px",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
ДЕНЬГИ НЕ ПРИШЛИ
|
||
</Box>
|
||
<Box sx={{
|
||
width: "30px",
|
||
padding: "10px",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
<CircleIcon sx={{
|
||
color: green[ 700 ],
|
||
transform: "scale(0.8)"
|
||
}} />
|
||
</Box>
|
||
<Box sx={{
|
||
width: "150px",
|
||
padding: "10px",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
ИНФО
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box sx={{
|
||
minHeight: "70px",
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
border: "1px solid",
|
||
borderColor: theme.palette.golden.main,
|
||
backgroundColor: theme.palette.goldenMedium.main
|
||
}}>
|
||
<Box sx={{
|
||
width: "150px",
|
||
padding: "10px",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
09.09.2022
|
||
</Box>
|
||
<Box sx={{
|
||
width: "100%",
|
||
padding: "10px",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
ВЫВОД
|
||
</Box>
|
||
<Box sx={{
|
||
width: "30px",
|
||
padding: "10px",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
<CircleIcon sx={{
|
||
color: green[ 700 ],
|
||
transform: "scale(0.8)"
|
||
}} />
|
||
</Box>
|
||
<Box sx={{
|
||
width: "150px",
|
||
padding: "10px",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
ИНФО
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box sx={{
|
||
minHeight: "70px",
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
border: "1px solid",
|
||
borderColor: theme.palette.golden.main,
|
||
backgroundColor: theme.palette.goldenMedium.main
|
||
}}>
|
||
<Box sx={{
|
||
width: "150px",
|
||
padding: "10px",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
09.09.2022
|
||
</Box>
|
||
<Box sx={{
|
||
width: "100%",
|
||
padding: "10px",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
ЗДРАВСТВУЙТЕ, МОЖНО ЛИ ОПЛАТИТЬ ЛИЦОМ НЕ ДОСТИГШИМ 18 ЛЕТ, ОПЛАТИТЬ 300 РУБЛЕЙ ЧЕРЕЗ КИВИ
|
||
</Box>
|
||
<Box sx={{
|
||
width: "30px",
|
||
padding: "10px",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
<CircleIcon sx={{
|
||
color: green[ 700 ],
|
||
transform: "scale(0.8)"
|
||
}} />
|
||
</Box>
|
||
<Box sx={{
|
||
width: "150px",
|
||
padding: "10px",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
ИНФО
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box sx={{
|
||
minHeight: "70px",
|
||
display: "flex",
|
||
justifyContent: "space-between"
|
||
}}>
|
||
<Box sx={{
|
||
width: "150px",
|
||
padding: "10px",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
07.09.2022
|
||
</Box>
|
||
<Box sx={{
|
||
width: "100%",
|
||
padding: "10px",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
ПРОБЛЕМЫ С ВЫВОДОМ
|
||
</Box>
|
||
<Box sx={{
|
||
width: "30px",
|
||
padding: "10px",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
<CircleIcon sx={{
|
||
color: green[ 700 ],
|
||
transform: "scale(0.8)"
|
||
}} />
|
||
</Box>
|
||
<Box sx={{
|
||
width: "150px",
|
||
padding: "10px",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
ИНФО
|
||
</Box>
|
||
</Box>
|
||
|
||
</Box>
|
||
|
||
<Pagination />
|
||
|
||
</Box>
|
||
</Box>
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
|
||
|
||
export default Users; |