71 lines
1.6 KiB
React
71 lines
1.6 KiB
React
import React, { useState } from "react";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
|
|
/**
|
|
* TODO: Add email validation function.
|
|
*/
|
|
export default function Contact() {
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
email: "",
|
|
message: "",
|
|
});
|
|
|
|
const handleChange = (event) => {
|
|
setFormData({
|
|
...formData,
|
|
[event.target.name]: event.target.value,
|
|
});
|
|
};
|
|
|
|
const handleSubmit = (event) => {
|
|
event.preventDefault();
|
|
// Handle form submission here, e.g., send data to server
|
|
console.log(formData);
|
|
};
|
|
|
|
return (
|
|
<div id="contact-section">
|
|
<h1>Contact Me</h1>
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="row">
|
|
<input
|
|
className="shadow"
|
|
placeholder="Name"
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
/>
|
|
<input
|
|
className="shadow"
|
|
placeholder="example@email.com"
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
<div className="row">
|
|
<textarea
|
|
className="shadow"
|
|
placeholder="Message"
|
|
id="message"
|
|
name="message"
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<button type="submit" className="button shadow">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|