Final touches
This commit is contained in:
Fernando Videira
@@ -1,18 +1,67 @@
|
||||
import React from "react";
|
||||
import emailjs from "@emailjs/browser";
|
||||
import { ToastContainer, toast } from "react-toastify";
|
||||
import "react-toastify/dist/ReactToastify.css";
|
||||
|
||||
const ContactForm = () => {
|
||||
const notify = () => {
|
||||
toast.success("Message Sent Successfully!");
|
||||
};
|
||||
|
||||
const errorToast = () => {
|
||||
toast.error("Error Sending Message!");
|
||||
};
|
||||
|
||||
const emptyForm = () => {
|
||||
toast.warning("Please fill all the fields!");
|
||||
};
|
||||
|
||||
const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
let isEmpty = Array.from(e.currentTarget.elements).some(
|
||||
(input) =>
|
||||
(input as HTMLInputElement).type !== "submit" &&
|
||||
(input as HTMLInputElement).value.trim() === ""
|
||||
);
|
||||
|
||||
if (isEmpty) {
|
||||
emptyForm();
|
||||
return;
|
||||
}
|
||||
|
||||
emailjs
|
||||
.sendForm("service_42i3ig6", "template_f30zlog", e.currentTarget, {
|
||||
publicKey: "vcSOwPedqkRH3nmr9",
|
||||
})
|
||||
.then(
|
||||
(result) => {
|
||||
console.log(result.text);
|
||||
notify();
|
||||
},
|
||||
(error) => {
|
||||
console.log(error.text);
|
||||
errorToast();
|
||||
}
|
||||
);
|
||||
|
||||
e.currentTarget.reset();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-10 mx-5 lg:mx-0 flex justify-center items-center">
|
||||
<form className="w-full md:w-auto">
|
||||
<form onSubmit={sendEmail} className="w-full md:w-auto">
|
||||
<div className="flex flex-col md:flex-row md:gap-3">
|
||||
<input
|
||||
className="form-input"
|
||||
type="text"
|
||||
id="name"
|
||||
name="user_name"
|
||||
placeholder="Name"
|
||||
/>
|
||||
<input
|
||||
className="form-input"
|
||||
type="email"
|
||||
id="email"
|
||||
name="user_email"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
@@ -20,13 +69,13 @@ const ContactForm = () => {
|
||||
<input
|
||||
className="form-input"
|
||||
type="text"
|
||||
id="company"
|
||||
name="user_company"
|
||||
placeholder="Company"
|
||||
/>
|
||||
<input
|
||||
className="form-input"
|
||||
type="number"
|
||||
id="phone"
|
||||
name="user_phone"
|
||||
placeholder="Phone"
|
||||
/>
|
||||
</div>
|
||||
@@ -34,26 +83,39 @@ const ContactForm = () => {
|
||||
<input
|
||||
className="form-input"
|
||||
type="text"
|
||||
id="question"
|
||||
name="user_question"
|
||||
placeholder="What is your most important question?"
|
||||
></input>
|
||||
|
||||
<textarea
|
||||
className="form-input"
|
||||
name="message"
|
||||
id="message"
|
||||
placeholder="Message"
|
||||
rows={6}
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div className="flex mt-5 mb-10 lg:mt-12 mx-10 lg:mx-20 rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
|
||||
<a className="flex w-full" href="#Contact">
|
||||
<button className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500">
|
||||
Send!
|
||||
</button>
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ToastContainer
|
||||
position="top-center"
|
||||
autoClose={5000}
|
||||
hideProgressBar
|
||||
newestOnTop={false}
|
||||
closeOnClick
|
||||
rtl={false}
|
||||
pauseOnFocusLoss
|
||||
draggable
|
||||
pauseOnHover
|
||||
theme="dark"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import Logo from "../../../assets/logo.svg";
|
||||
|
||||
export default () => {
|
||||
const [state, setState] = useState(false);
|
||||
const [colorChange, setColorChange] = useState(false);
|
||||
const [isNavbarCollapsed, setIsNavbarCollapsed] = useState(
|
||||
window.innerWidth <= 768
|
||||
);
|
||||
|
||||
const changeColor = () => {
|
||||
if (window.scrollY >= 100) {
|
||||
setColorChange(true);
|
||||
} else {
|
||||
setColorChange(false);
|
||||
}
|
||||
};
|
||||
|
||||
const checkNavbarCollapse = () => {
|
||||
if (window.innerWidth <= 768) {
|
||||
setIsNavbarCollapsed(true);
|
||||
} else {
|
||||
setIsNavbarCollapsed(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", changeColor);
|
||||
window.addEventListener("resize", checkNavbarCollapse);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeColor);
|
||||
window.removeEventListener("resize", checkNavbarCollapse);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Replace javascript:void(0) path with your path
|
||||
const navigation = [
|
||||
{ title: "Services", path: "#Services" },
|
||||
{ title: "Results", path: "#Results" },
|
||||
{ title: "Contact", path: "#Contact" },
|
||||
];
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={`${
|
||||
colorChange
|
||||
? "bg-black bg-opacity-80 transition duration-500 w-full border-0 sticky top-0 z-10"
|
||||
: "z-10"
|
||||
}`}
|
||||
>
|
||||
<div className="items-center px-4 max-w-screen-xl mx-auto md:flex md:px-8">
|
||||
<div className="flex items-center justify-center md:justify-between py-3 md:py-5 md:block">
|
||||
{isNavbarCollapsed ? (
|
||||
<button
|
||||
className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
|
||||
onClick={() => setState(!state)}
|
||||
>
|
||||
<img src={Logo} width={60} height={60} alt="logo" />
|
||||
</button>
|
||||
) : (
|
||||
<a href="/">
|
||||
<img src={Logo} width={60} height={60} alt="logo" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
|
||||
state ? "block" : "hidden"
|
||||
}`}
|
||||
>
|
||||
<ul className="text-text-gold justify-center items-center space-y-8 md:flex md:space-x-6 md:space-y-0">
|
||||
{navigation.map((item, idx) => {
|
||||
return (
|
||||
<li key={idx} className="hover:text-white">
|
||||
<a
|
||||
href={item.path}
|
||||
className="block py-2 md:py-0 md:px-4 text-xl font-medium$"
|
||||
>
|
||||
{item.title}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user