PenaSide/adminFront
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

промокод - на ревью

Browse Source
This commit is contained in:
Nikolai 2022-09-19 14:45:58 +03:00
parent 9db26ba379
commit cfdf519d0b
6 changed files with 1030 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

836
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -3,11 +3,14 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@date-io/dayjs": "^2.15.0",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@material-ui/pickers": "^3.3.10",
"@mui/icons-material": "^5.10.3",
"@mui/material": "^5.10.5",
"@mui/styled-engine-sc": "^5.10.3",
"@mui/x-date-pickers": "^5.0.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
@ -15,6 +18,8 @@
"@types/node": "^16.11.56",
"@types/react": "^18.0.18",
"@types/react-dom": "^18.0.6",
"dayjs": "^1.11.5",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",

4
src/Components/Content/index.tsx
View File

@ -1,6 +1,6 @@
import * as React from "react";
import { Box } from "@mui/material";
import Users from "../Users";
import Promocode from "../Promocode";
const Content: React.FC = () => {
@ -16,7 +16,7 @@ const Content: React.FC = () => {
overflowY: "auto",
padding: "60px"
}}>
<Users />
<Promocode />
</Box>
</React.Fragment>
);

4
src/Components/Menu/index.tsx
View File

@ -37,8 +37,8 @@ const Menu: React.FC = () => {
</Box>
<Box sx={{
height: "calc( 100vh -85px )",
overflowY: "scroll",
height: "calc( 100vh - 85px )",
overflowY: "auto",
'&::-webkit-scrollbar': {
display: "none"
}

184
src/Components/Promocode/index.tsx Normal file
View File

@ -0,0 +1,184 @@
import * as React from "react";
import { Box, Typography, TextField, Checkbox } from "@mui/material";
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import dayjs, { Dayjs } from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import theme from "../../theme";
const Promocode: React.FC = () => {
const [value1, setValue1] = React.useState<Dayjs | null>();
const handleChange1 = (newValue: Dayjs | null) => {
setValue1(newValue);
};
const [value2, setValue2] = React.useState<Dayjs | null>();
const handleChange2 = (newValue: Dayjs | null) => {
setValue2(newValue);
};
return (
<React.Fragment>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Typography
variant="subtitle1"
sx={{
width: "90%",
height: "60px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
color: theme.palette.secondary.main
}}>
ПРОМОКОД
</Typography>
<Typography
variant="h4"
sx={{
width: "90%",
height: "40px",
fontWeight: "normal",
color: theme.palette.grayDisabled.main,
marginTop: "65px"
}}>
Название:
</Typography>
<Typography
variant="h6"
sx={{
width: "90%",
height: "60px",
fontWeight: "normal",
color: theme.palette.secondary.main
}}>
GJ58HG6GG
</Typography>
<Typography
variant="h4"
sx={{
width: "90%",
height: "40px",
fontWeight: "normal",
color: theme.palette.grayDisabled.main,
marginTop: "35px"
}}>
Условия:
</Typography>
<Typography
variant="h6"
sx={{
width: "90%",
height: "60px",
fontWeight: "normal",
color: theme.palette.secondary.main
}}>
Работает, если заплатите 100500 денег
</Typography>
<Typography
variant="h4"
sx={{
width: "90%",
height: "40px",
fontWeight: "normal",
color: theme.palette.grayDisabled.main,
marginTop: "35px"
}}>
Дата действия:
</Typography>
<Box sx={{
width: "90%",
display: "flex"
}}>
<Typography sx={{
width: "35px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "left",
}}>С</Typography>
<DesktopDatePicker
inputFormat="MM/DD/YYYY"
value={value1}
onChange={handleChange1}
renderInput={(params) => <TextField {...params} />}
InputProps={{ sx: {
height: "40px",
color: theme.palette.secondary.main,
border: "1px solid",
borderColor: theme.palette.secondary.main,
"& .MuiSvgIcon-root": { color: theme.palette.secondary.main }
} }}
/>
<Typography sx={{
width: "65px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}}>по</Typography>
<DesktopDatePicker
inputFormat="MM/DD/YYYY"
value={value2}
onChange={handleChange2}
renderInput={(params) => <TextField {...params} />}
InputProps={{ sx: {
height: "40px",
color: theme.palette.secondary.main,
border: "1px solid",
borderColor: theme.palette.secondary.main,
"& .MuiSvgIcon-root": { color: theme.palette.secondary.main }
} }}
/>
</Box>
<Box sx={{
display: "flex",
width: "90%",
marginTop: theme.spacing(2),
}}>
<Box sx={{
width: "20px",
height: "42px",
display: "flex",
flexDirection: "column",
justifyContent: "left",
alignItems: "left",
marginRight: theme.spacing(1)
}}>
<Checkbox sx={{
color: theme.palette.secondary.main,
'&.Mui-checked': {
color: theme.palette.secondary.main,
},
}} />
</Box>
<Box sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}>
Бессрочно
</Box>
</Box>
</LocalizationProvider>
</React.Fragment>
);
}
export default Promocode;

4
src/theme.ts
View File

@ -68,8 +68,7 @@ const theme = createTheme({
h6: {
fontFamily: fontFamily,
fontWeight: fontWeight,
fontSize: 18,
textAlign: "center"
fontSize: 18
},
button: {
fontFamily: fontFamily,
@ -146,7 +145,6 @@ declare module '@mui/material/styles' {
h5: React.CSSProperties;
h6: React.CSSProperties;
button: React.CSSProperties;
}
}