Initial commit

components/templates/contact.js

@@ -0,0 +1,78 @@
+import axios from "axios";
+import { useState, useEffect } from "react";
+
+export default function Form() {
+	const [message, setMessage] = useState("");
+	const [name, setName] = useState("");
+	const [mail, setMail] = useState("");
+	const [tel, setTel] = useState("");
+	const sendMail = (e) => {
+		e.preventDefault();
+		axios
+			.post("/api/hello", {
+				msg: message,
+				name: name,
+				mail: mail,
+				tel: tel,
+			})
+			.then(function (response) {
+				console.log(response);
+			})
+			.catch(function (error) {
+				console.log(error);
+			});
+	};
+	return (
+		<div className="flex flex-row px-48 justify-around">
+			<form className="flex flex-col py-12">
+				<input
+					name="name"
+					placeholder="Imię"
+					className="border border-slate-300 h-8 w-[32rem] mt-4 px-4 transition ease-in-out m-0 focus:text-gray-700 focus:border-blue-600 focus:outline-none"
+					onChange={(e) => {
+						setName(e.target.value);
+					}}
+				></input>
+
+				<span className="flex flex-row w-[32rem]">
+					<input
+						name="phone"
+						placeholder="Telefon"
+						className="mr-1 border border-slate-300 h-8 w-[16rem] mt-4 px-4 transition ease-in-out m-0 focus:text-gray-700 focus:border-blue-600 focus:outline-none"
+						onChange={(e) => {
+							setTel(e.target.value);
+						}}
+					></input>
+					<input
+						name="email"
+						placeholder="Email"
+						className="ml-1 border border-slate-300 h-8 w-[16rem] mt-4 px-4 transition ease-in-out m-0 focus:text-gray-700 focus:border-blue-600 focus:outline-none"
+						onChange={(e) => {
+							setMail(e.target.value);
+						}}
+					></input>
+				</span>
+
+				<textarea
+					name="message"
+					placeholder="Wiadomość"
+					className="border border-slate-300 h-64 w-[32rem] mt-4 px-4 py-4 transition ease-in-out m-0 focus:text-gray-700 focus:border-blue-600 focus:outline-none"
+					onChange={(e) => {
+						setMessage(e.target.value);
+					}}
+				></textarea>
+				<button
+					className="bg-red-500 text-gray-100 font-medium mt-4 px-3 py-3 w-[32rem] ring-0 ring-offset-2 ring-red-500 transition ease-in-out duration-200 hover:ring-2 hover:bg-rose-600"
+					onClick={(e) => {
+						sendMail(e);
+					}}
+				>
+					Wyślij
+				</button>
+			</form>
+			<div className="grid place-content-center">
+				<img src="/images/envelope.png" className="w-96 p-16"></img>
+			</div>
+		</div>
+	);
+}