172 lines
5.0 KiB
TypeScript
172 lines
5.0 KiB
TypeScript
import * as React from "react";
|
||
import { Box, Typography, Button } from "@mui/material";
|
||
import { ThemeProvider } from "@mui/material";
|
||
import theme from "../../theme";
|
||
import CssBaseline from '@mui/material/CssBaseline';
|
||
import Logo from "../Logo";
|
||
|
||
|
||
const Authorization: React.FC = () => {
|
||
return (
|
||
<React.Fragment>
|
||
<ThemeProvider theme={theme}>
|
||
<CssBaseline />
|
||
<Box sx={{
|
||
backgroundColor: theme.palette.primary.main,
|
||
color: theme.palette.secondary.main,
|
||
height: "100%"
|
||
}}>
|
||
<Box sx={{
|
||
width: "100vw",
|
||
height: "100vh",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
<Box sx={{
|
||
width: "350px",
|
||
height: "700px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
}}>
|
||
|
||
<Logo />
|
||
|
||
<Box sx={{
|
||
width: "100%",
|
||
height: "100px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
alignItems: "center"
|
||
}}>
|
||
<Box>
|
||
<Typography variant="h6">
|
||
Все пользователи
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Button
|
||
variant = 'enter'
|
||
>
|
||
ВОЙТИ
|
||
</Button>
|
||
</Box>
|
||
|
||
<Box sx={{
|
||
width: "100%",
|
||
height: "100px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
alignItems: "center"
|
||
}}>
|
||
<Box>
|
||
<Typography variant="h6">
|
||
Общая статистика
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Button
|
||
variant = "enter"
|
||
sx={{
|
||
backgroundColor: theme.palette.content.main,
|
||
"&:hover": {
|
||
backgroundColor: theme.palette.menu.main
|
||
}
|
||
}}>
|
||
ВОЙТИ
|
||
</Button>
|
||
</Box>
|
||
|
||
<Box sx={{
|
||
width: "100%",
|
||
height: "100px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
alignItems: "center"
|
||
}}>
|
||
<Box>
|
||
<Typography variant="h6">
|
||
Шаблонизатор документов
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Button
|
||
variant = "enter"
|
||
sx={{
|
||
backgroundColor: theme.palette.content.main,
|
||
"&:hover": {
|
||
backgroundColor: theme.palette.menu.main
|
||
}
|
||
}}>
|
||
ВОЙТИ
|
||
</Button>
|
||
</Box>
|
||
|
||
<Box sx={{
|
||
width: "100%",
|
||
height: "100px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
alignItems: "center"
|
||
}}>
|
||
<Box>
|
||
<Typography variant="h6">
|
||
Конструктор опросов
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Button
|
||
variant = "enter"
|
||
sx={{
|
||
backgroundColor: theme.palette.content.main,
|
||
"&:hover": {
|
||
backgroundColor: theme.palette.menu.main
|
||
}
|
||
}}>
|
||
ВОЙТИ
|
||
</Button>
|
||
</Box>
|
||
|
||
<Box sx={{
|
||
width: "100%",
|
||
height: "100px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
alignItems: "center"
|
||
}}>
|
||
<Box>
|
||
<Typography variant="h6">
|
||
Сокращатель ссылок
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Button
|
||
variant = "enter"
|
||
sx={{
|
||
backgroundColor: theme.palette.content.main,
|
||
"&:hover": {
|
||
backgroundColor: theme.palette.menu.main
|
||
}
|
||
}}>
|
||
ВОЙТИ
|
||
</Button>
|
||
</Box>
|
||
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
</ThemeProvider>
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
|
||
|
||
export default Authorization; |