Skip to content

Commit dd7f12e

Browse files
LoupesDEVLoupesDEV
committed
feat!: contact form (not working /!\)
1 parent 823d232 commit dd7f12e

File tree

4 files changed

+304
-5
lines changed

4 files changed

+304
-5
lines changed

‎.gitignore‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,4 @@
2020

2121
npm-debug.log*
2222
yarn-debug.log*
23-
yarn-error.log*
24-
25-
test.txt
26-
/src/Components/Contact.jsx
27-
/src/Components/ContactForm.jsx
23+
yarn-error.log*

‎src/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Route, Routes } from 'react-router-dom';
33

44
import Home from './Components/Home';
55
import About from './Components/About';
6+
import Contact from './Components/Contact';
67
import Portfolio from './Components/Portfolio';
78
import NavbarBottom from './Components/NavbarBottom';
89
import TogleTheme from './Components/TogleTheme';
@@ -45,6 +46,7 @@ function App() {
4546
<Route path='/' element={<Home />} />
4647
<Route path='/about' element={<About />} />
4748
<Route path='/portfolio' element={<Portfolio />} />
49+
<Route path='/contact' element={<Contact />} />
4850
</Routes>
4951

5052
<NavbarBottom />

‎src/Components/Contact.jsx‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import React from "react";
2+
import { Container, Grid, Link, Typography } from "@mui/material";
3+
import { Box, Stack } from "@mui/system";
4+
5+
import { FaMap, FaEnvelopeOpen, FaPhoneAlt } from "react-icons/fa";
6+
import {
7+
FaLinkedinIn,
8+
FaWhatsapp,
9+
FaGithub,
10+
} from "react-icons/fa";
11+
import "../Styles/Contact.css";
12+
import ContactForm from "./ContactForm";
13+
14+
const Contact = () => {
15+
return (
16+
<Container sx={{ my: { xs: "12%", lg: "70px" } }}>
17+
<Stack textTransform="uppercase" mb={6}>
18+
<Typography
19+
fontWeight="900"
20+
fontSize={{ xs: "25px", lg: "60px" }}
21+
textAlign={{ xs: "left", lg: "center" }}
22+
>
23+
ME <span style={{ color: "var(--mainPrimary)" }}>CONTACTER</span>
24+
</Typography>
25+
</Stack>
26+
27+
<Grid container>
28+
<Grid item lg={4}>
29+
<Stack
30+
textTransform="capitalize"
31+
height="100%"
32+
direction="column"
33+
justifyContent="space-between"
34+
>
35+
<Stack
36+
display="flex"
37+
flexDirection="row"
38+
alignItems="center"
39+
gap={2}
40+
mb={4}
41+
>
42+
<Stack fontSize={40} color="text.disabled">
43+
<FaMap />
44+
</Stack>
45+
46+
<Stack fontSize={40} textAlign="left">
47+
<Typography> Localisation </Typography>
48+
<Typography> Clermont-Ferrand, France </Typography>
49+
</Stack>
50+
</Stack>
51+
52+
<Stack
53+
display="flex"
54+
flexDirection="row"
55+
alignItems="center"
56+
gap={2}
57+
mb={4}
58+
>
59+
<Stack fontSize={30} color="text.disabled">
60+
<FaEnvelopeOpen />
61+
</Stack>
62+
63+
<Stack fontSize={30} textAlign="left">
64+
<Typography> Email </Typography>
65+
66+
<Link
67+
href="mailto:[email protected]"
68+
underline="hover"
69+
sx={{ color: "text.praimary", textTransform: "lowercase" }}
70+
fontSize={15}
71+
>
72+
[email protected]
73+
</Link>
74+
</Stack>
75+
</Stack>
76+
77+
<Stack
78+
display="flex"
79+
flexDirection="row"
80+
alignItems="center"
81+
gap={2}
82+
mb={4}
83+
>
84+
<Stack fontSize={40} color="text.disabled">
85+
<FaPhoneAlt />
86+
</Stack>
87+
88+
<Stack textAlign="left">
89+
<Typography> Appelez-moi </Typography>
90+
<Link
91+
href="tel:+33769724327"
92+
underline="hover"
93+
sx={{ color: "text.praimary" }}
94+
>
95+
+33 7 69 72 43 27
96+
</Link>
97+
</Stack>
98+
</Stack>
99+
100+
<Stack
101+
display="flex"
102+
flexDirection="row"
103+
alignItems="center"
104+
gap={2}
105+
mb={3}
106+
justifyContent={{ xs: "center", lg: "left" }}
107+
className="animate__animated animate__zoomIn"
108+
>
109+
<Link
110+
href="https://www.linkedin.com/in/math%C3%A9o-pichot-mo%C3%AFse-b538222a0/"
111+
target="_blank"
112+
rel="noopener"
113+
>
114+
<Box
115+
className="social-icons"
116+
bgcolor="action.disabledBackground"
117+
>
118+
<FaLinkedinIn />
119+
</Box>
120+
</Link>
121+
122+
<Link
123+
href="https://wa.me/+33769724327"
124+
target="_blank"
125+
rel="noopener"
126+
>
127+
<Box
128+
className="social-icons"
129+
bgcolor="action.disabledBackground"
130+
>
131+
<FaWhatsapp />
132+
</Box>
133+
</Link>
134+
135+
<Link
136+
href="https://github.com/KucoDEV"
137+
target="_blank"
138+
rel="noopener"
139+
>
140+
<Box
141+
className="social-icons"
142+
bgcolor="action.disabledBackground"
143+
>
144+
<FaGithub />
145+
</Box>
146+
</Link>
147+
</Stack>
148+
</Stack>
149+
</Grid>
150+
151+
<Grid item lg={7}>
152+
<ContactForm />
153+
</Grid>
154+
</Grid>
155+
</Container>
156+
);
157+
};
158+
export default Contact;

‎src/Components/ContactForm.jsx‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import React, { Fragment, useRef, useState } from "react";
2+
import {
3+
Box,
4+
Grid,
5+
Paper,
6+
Slide,
7+
Snackbar,
8+
TextField,
9+
Typography,
10+
} from "@mui/material";
11+
12+
import { IoPaperPlane } from "react-icons/io5";
13+
import TaskAltIcon from "@mui/icons-material/TaskAlt";
14+
15+
import emailjs from "@emailjs/browser";
16+
17+
export default function ContactForm() {
18+
const form = useRef();
19+
20+
const [snackbarState, setSnackbarState] = useState(false);
21+
22+
const sendEmail = (e) => {
23+
e.preventDefault();
24+
25+
emailjs
26+
.sendForm(
27+
"service_lp3qp5q",
28+
"template_dc270ak",
29+
form.current,
30+
"Q4VgSuu5zR0FYlGeR"
31+
)
32+
.then(
33+
(result) => {
34+
if (result.status === 200) {
35+
setSnackbarState(true);
36+
}
37+
},
38+
(error) => {
39+
console.log();
40+
}
41+
);
42+
43+
e.target.reset();
44+
};
45+
46+
return (
47+
<Fragment>
48+
<Box
49+
sx={{ display: "flex", flexDirection: "column" }}
50+
className="animate__animated animate__pulse"
51+
>
52+
<Typography variant="h6" ml={{ lg: 8 }} mb={2} mt={{ xs: 8, lg: 0 }}>
53+
{" "}
54+
Envoyez moi un message:{" "}
55+
</Typography>
56+
57+
<Box
58+
component="form"
59+
ref={form}
60+
noValidate
61+
onSubmit={sendEmail}
62+
ml={{ lg: 8 }}
63+
>
64+
<Grid container spacing={2}>
65+
<Grid item xs={12}>
66+
<TextField
67+
autoComplete="given-name"
68+
name="user_name"
69+
fullWidth
70+
id="fullName"
71+
label="Prénom & Nom"
72+
/>
73+
</Grid>
74+
<Grid item xs={12}>
75+
<TextField
76+
fullWidth
77+
id="email"
78+
label="Email"
79+
name="user_email"
80+
autoComplete="email"
81+
/>
82+
</Grid>
83+
<Grid item xs={12}>
84+
<TextField fullWidth id="subject" label="Sujet" name="subject" />
85+
</Grid>
86+
<Grid item xs={12}>
87+
<TextField
88+
className="contact-input"
89+
fullWidth
90+
name="message"
91+
label="Message"
92+
type="text"
93+
id="message"
94+
multiline
95+
rows={4}
96+
/>
97+
</Grid>
98+
</Grid>
99+
100+
<Box
101+
className="project-btn"
102+
component="button"
103+
my={3}
104+
mx="auto"
105+
color="text.primary"
106+
type="submit"
107+
>
108+
<Box className="project-btn-icon">
109+
<IoPaperPlane />
110+
</Box>
111+
<Box className="project-btn-text"> ENVOYER</Box>
112+
</Box>
113+
</Box>
114+
</Box>
115+
116+
<Snackbar
117+
open={snackbarState}
118+
onClose={() => {
119+
setSnackbarState(false);
120+
}}
121+
autoHideDuration={6000}
122+
TransitionComponent={Slide}
123+
sx={{ bottom: { xs: 65, md: "24px" } }}
124+
children={
125+
<Paper
126+
elevation={4}
127+
sx={{
128+
bgcolor: "text.disabled",
129+
color: "white",
130+
p: 1.5,
131+
mx: "auto",
132+
display: "flex",
133+
gap: 1,
134+
}}
135+
>
136+
<TaskAltIcon />
137+
<span>Le message a été envoyé.</span>
138+
</Paper>
139+
}
140+
/>
141+
</Fragment>
142+
);
143+
}

0 commit comments

Comments
 (0)