diff --git a/package-lock.json b/package-lock.json index 50111a1..0de2301 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,8 +10,10 @@ "dependencies": { "@docusaurus/core": "3.1.0", "@docusaurus/preset-classic": "3.1.0", + "@emailjs/browser": "^4.3.3", "@mdx-js/react": "^3.0.0", "clsx": "^2.0.0", + "emailjs": "^4.0.3", "postcss-loader": "^8.0.0", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", @@ -2821,6 +2823,14 @@ "node": ">=18.0" } }, + "node_modules/@emailjs/browser": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-4.3.3.tgz", + "integrity": "sha512-ltpt2S/WVREIBXptxYAVYBvXb2O6yTUYiRUWF8OLikMxlmiGsIgKpgHppikNd4Df0uAav7jCsQKcOJ3TJFUx5g==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -5848,6 +5858,22 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.675.tgz", "integrity": "sha512-+1u3F/XPNIdUwv8i1lDxHAxCvNNU0QIqgb1Ycn+Jnng8ITzWSvUqixRSM7NOazJuwhf65IV17f/VbKj8DmL26A==" }, + "node_modules/emailjs": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/emailjs/-/emailjs-4.0.3.tgz", + "integrity": "sha512-1CDXoE3FxkSg7QRTlLsDCYG9elFNu/JQsYWu3Xfrk77ubbg5zYgFGg+JRUKQJ56mceM8o3rHHX0VB4wo9XsyLQ==", + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "typescript": ">=4.3.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", diff --git a/package.json b/package.json index 70c6ee1..5f8a696 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,10 @@ "dependencies": { "@docusaurus/core": "3.1.0", "@docusaurus/preset-classic": "3.1.0", + "@emailjs/browser": "^4.3.3", "@mdx-js/react": "^3.0.0", "clsx": "^2.0.0", + "emailjs": "^4.0.3", "postcss-loader": "^8.0.0", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", diff --git a/src/components/UI Components/ContactPageForm.tsx b/src/components/UI Components/ContactPageForm.tsx new file mode 100644 index 0000000..3657bb9 --- /dev/null +++ b/src/components/UI Components/ContactPageForm.tsx @@ -0,0 +1,138 @@ +import { useState } from "react"; +import { FaUser, FaEnvelope, FaBook, FaMessage} from "react-icons/fa6"; +import Message from "../../../static/img/message.svg"; +import emailjs from "@emailjs/browser"; + + +type formFields = { + name: string; + email: string; + question: string; + comment: string; +}; + +const ContactPageForm = () => { + const [formValues, setFormValues] = useState({ + name: "", + email: "", + question: "", + comment: "", + }); + const [formSent, setFormSent] = useState(false); + + const updateFormValues = (e: React.ChangeEvent) => { + const fieldName = e.target.name; + const fieldValue = e.target.value; + setFormValues((values) => ({ ...values, [fieldName]: fieldValue })); + }; + + const submit = (e: React.FormEvent) => { + e.preventDefault(); // stop page refresh on submit + + //idrk what to do with the form inputs, probably send to an API somewhere + emailjs.sendForm('service_g5pvqxb', 'template_tznfo8k', e.target as HTMLFormElement, 'yrcBV_oYPU2TTOtbs'); + setFormValues({name: "", email:"", question:"", comment:""}); + setFormSent(true); + }; + + return (<> +
+
+ +
+
+

Get In Touch!

+
+
+
+

Your Name:

+
+
+ +
+ +
+
+
+

Your Email:

+
+
+ +
+ +
+
+
+
+

Your Question:

+
+
+ +
+ +
+
+
+

Your Comment:

+
+
+ +
+