75 lines
2.3 KiB
JavaScript
75 lines
2.3 KiB
JavaScript
import Head from "next/head";
|
|
import styles from "../styles/Home.module.css";
|
|
import Header from "./templates/header";
|
|
import Nav from "./templates/nav";
|
|
import Content from "./templates/content";
|
|
import Footer from "./templates/footer";
|
|
|
|
import { useState } from "react";
|
|
|
|
export default function Kontakt() {
|
|
const [name, setName] = useState("");
|
|
const [email, setEmail] = useState("");
|
|
const [message, setMessage] = useState("");
|
|
const [submitted, setSubmitted] = useState(false);
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault()
|
|
console.log('Sending')
|
|
let data = {
|
|
name,
|
|
email,
|
|
message
|
|
}
|
|
fetch('/api/contact', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Accept': 'application/json, text/plain, */*',
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
}).then((res) => {
|
|
console.log('Response received')
|
|
if (res.status === 200) {
|
|
console.log('Response succeeded!')
|
|
setSubmitted(true)
|
|
setName('')
|
|
setEmail('')
|
|
setBody('')
|
|
}
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Head>
|
|
<title>Wastpol</title>
|
|
<meta name="description" content="Wastpol" />
|
|
<link rel="icon" href="/icon.png" />
|
|
</Head>
|
|
|
|
<Nav />
|
|
<main className={styles.main}>
|
|
<div className={styles.container}>
|
|
<form className={styles.main}>
|
|
<formGroup className={styles.inputGroup}>
|
|
<label htmlFor="name">Imię</label>
|
|
<input type="text" name="name" onChange={(e)=>{setName(e.target.value)}} className={styles.inputField} />
|
|
</formGroup>
|
|
<formGroup className={styles.inputGroup}>
|
|
<label htmlFor="email">Email</label>
|
|
<input type="email" name="email" onChange={(e)=>{setEmail(e.target.value)}} className={styles.inputField} />
|
|
</formGroup>
|
|
<formGroup className={styles.inputGroup}>
|
|
<label htmlFor="message">Wiadomość</label>
|
|
<input type="text" name="message" onChange={(e)=>{setMessage(e.target.value)}} className={styles.inputField} />
|
|
</formGroup>
|
|
<input type="submit" onClick={(e)=>{handleSubmit(e)}} />
|
|
</form>
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|