diff --git a/src/App.tsx b/src/App.tsx index 94ec6af833904b83ce6b19ffafb8d4cd9e61e0ff..48c99ffaadb37f58b3658fe4c0370f7ff10cb0a6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,23 +1,10 @@ import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +import { Form } from './components/TestForm/index'; export const App: React.FC = () => ( <div className="App"> <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - Edit <code>src/App.tsx</code> and save to reload. - </p> - - <a - className="App-link" - href="https://reactjs.org" - target="_blank" - rel="noopener noreferrer" - > - Learn React - </a> + <Form /> </header> </div> ); diff --git a/src/components/TestForm/index.tsx b/src/components/TestForm/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..dc6abb280f6677df70dc77121b7a0508e6b9e0ba --- /dev/null +++ b/src/components/TestForm/index.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import TextField from '@material-ui/core/TextField'; +import Button from '@material-ui/core/Button'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Checkbox from '@material-ui/core/Checkbox'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + '& > *': { + margin: theme.spacing(0), + }, + }, + form: { + width: '100%', // Fix IE 11 issue. + marginTop: theme.spacing(1), + }, + submit: { + margin: theme.spacing(3, 0, 2), + }, + }), +); + +export const Form: React.FC = () => { + const classes = useStyles(); + + return ( + <form className={classes.form} noValidate> + <TextField + variant="outlined" + margin="normal" + required + fullWidth + id="email" + label="Email Address" + name="email" + autoComplete="email" + autoFocus + /> + <TextField + variant="outlined" + margin="normal" + required + fullWidth + name="password" + label="Password" + type="password" + id="password" + autoComplete="current-password" + /> + <FormControlLabel + control={<Checkbox value="remember" color="primary" />} + label="Remember me" + /> + <Button + type="submit" + fullWidth + variant="contained" + color="primary" + className={classes.submit} + > + Sign In + </Button> + </form> + ); +};