45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import {Box, Button, Container, Grid, TextField, Typography} from "@mui/material";
|
|
|
|
const AuthScreen = ({children}) => (
|
|
<Container maxWidth="sm">
|
|
<Box sx={{bgcolor: "action.hover", borderRadius: 2, p: 3}}>
|
|
<Typography textAlign="center" variant="h6" component="h4" sx={{mb: 1}}>
|
|
Sign in to your account
|
|
</Typography>
|
|
<Box sx={{py: 2}}>{children}</Box>
|
|
</Box>
|
|
</Container>
|
|
);
|
|
|
|
export const LoginFrame = () => (
|
|
|
|
|
|
<AuthScreen>
|
|
<form>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
type="email"
|
|
required
|
|
placeholder="Email"
|
|
fullWidth
|
|
label="Email"
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
required
|
|
placeholder="Password"
|
|
type="password"
|
|
fullWidth
|
|
label="Password"
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Button variant="contained" fullWidth sx={{mt: 2}}>Sign in</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</form>
|
|
</AuthScreen>
|
|
);
|