Skip to content

Commit eeed3df

Browse files
knight-coder-llcknight-coder-llc
committed
finished contact form initial
1 parent cf796e6 commit eeed3df

File tree

3 files changed

+143
-5
lines changed

3 files changed

+143
-5
lines changed

‎widgets/portfolio/debug.log‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
[0114/221829.862:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
22
[0118/230629.119:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
3+
[0127/233743.729:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

‎widgets/portfolio/src/components/Contact/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
77
import Modal from '@material-ui/core/Modal';
88
import Backdrop from '@material-ui/core/Backdrop';
99
import Fade from '@material-ui/core/Fade';
10-
10+
import { ContactForm } from '../ContactForm';
1111

1212
export const Contact = (props: ContactProps) => {
1313

@@ -55,8 +55,9 @@ export const Contact = (props: ContactProps) => {
5555
>
5656
<Fade in={open}>
5757
<div className={classes.paper}>
58-
<h2 id="transition-modal-title">Transition modal</h2>
59-
<p id="transition-modal-description">react-transition-group animates me.</p>
58+
<h2 id="transition-modal-title" style={{textAlign: 'center'}}>Contact</h2>
59+
{/* <p id="transition-modal-description">react-transition-group animates me.</p> */}
60+
<ContactForm />
6061
</div>
6162
</Fade>
6263
</Modal>

‎widgets/portfolio/src/components/ContactForm/index.tsx‎

Lines changed: 138 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,142 @@
1-
import React from 'react';
1+
import * as React from 'react';
22
import {ContactFormProps} from './interface';
3+
import Avatar from '@material-ui/core/Avatar';
4+
import Button from '@material-ui/core/Button';
5+
import CssBaseline from '@material-ui/core/CssBaseline';
6+
import TextField from '@material-ui/core/TextField';
7+
import FormControlLabel from '@material-ui/core/FormControlLabel';
8+
import Checkbox from '@material-ui/core/Checkbox';
9+
import Link from '@material-ui/core/Link';
10+
import Grid from '@material-ui/core/Grid';
11+
import Box from '@material-ui/core/Box';
12+
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
13+
import EmailIcon from '@material-ui/icons/Email';
14+
import Typography from '@material-ui/core/Typography';
15+
import { makeStyles } from '@material-ui/core/styles';
16+
import Container from '@material-ui/core/Container';
17+
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
318

19+
function Copyright() {
20+
return (
21+
<Typography variant="body2" color="textSecondary" align="center">
22+
{'Copyright © '}
23+
<Link color="inherit" href="https://material-ui.com/">
24+
Knight Coder LLC
25+
</Link>{' '}
26+
{new Date().getFullYear()}
27+
{'.'}
28+
</Typography>
29+
);
30+
}
31+
32+
const useStyles = makeStyles((theme) => ({
33+
paper: {
34+
marginTop: theme.spacing(8),
35+
display: 'flex',
36+
flexDirection: 'column',
37+
alignItems: 'center',
38+
},
39+
avatar: {
40+
margin: theme.spacing(1),
41+
backgroundColor: theme.palette.secondary.main,
42+
},
43+
form: {
44+
width: '100%', // Fix IE 11 issue.
45+
marginTop: theme.spacing(3),
46+
},
47+
submit: {
48+
margin: theme.spacing(3, 0, 2),
49+
},
50+
}));
451
export const ContactForm = (props: ContactFormProps) => {
5-
return <form></form>
52+
const classes = useStyles();
53+
54+
return (
55+
<Container component="main" maxWidth="xs">
56+
<CssBaseline />
57+
<div className={classes.paper}>
58+
<Avatar className={classes.avatar}>
59+
<EmailIcon />
60+
</Avatar>
61+
<Typography component="h1" variant="h5">
62+
Sign up
63+
</Typography>
64+
<form className={classes.form} noValidate>
65+
<Grid container spacing={2}>
66+
<Grid item xs={12} sm={6}>
67+
<TextField
68+
autoComplete="fname"
69+
name="firstName"
70+
variant="outlined"
71+
required
72+
fullWidth
73+
id="firstName"
74+
label="First Name"
75+
autoFocus
76+
/>
77+
</Grid>
78+
<Grid item xs={12} sm={6}>
79+
<TextField
80+
variant="outlined"
81+
required
82+
fullWidth
83+
id="lastName"
84+
label="Last Name"
85+
name="lastName"
86+
autoComplete="lname"
87+
/>
88+
</Grid>
89+
<Grid item xs={12}>
90+
<TextField
91+
variant="outlined"
92+
required
93+
fullWidth
94+
id="email"
95+
label="Email Address"
96+
name="email"
97+
autoComplete="email"
98+
/>
99+
</Grid>
100+
<Grid item xs={12}>
101+
<TextField
102+
variant="outlined"
103+
required
104+
fullWidth
105+
name="message"
106+
label="Message"
107+
type="textarea"
108+
id="message"
109+
multiline={true}
110+
/>
111+
</Grid>
112+
<Grid item xs={12}>
113+
<FormControlLabel
114+
control={<Checkbox value="allowExtraEmails" color="primary" />}
115+
label="I want to receive inspiration, marketing promotions and updates via email."
116+
/>
117+
</Grid>
118+
</Grid>
119+
<Button
120+
type="submit"
121+
fullWidth
122+
variant="contained"
123+
color="primary"
124+
className={classes.submit}
125+
>
126+
Submit
127+
</Button>
128+
{/* <Grid container justify="flex-end">
129+
<Grid item>
130+
<Link href="#" variant="body2">
131+
Chatbot
132+
</Link>
133+
</Grid>
134+
</Grid> */}
135+
</form>
136+
</div>
137+
<Box mt={5}>
138+
<Copyright />
139+
</Box>
140+
</Container>
141+
);
6142
}

0 commit comments

Comments
 (0)