added Contact Function

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package-lock.json

@@ -8,6 +8,7 @@
       "name": "sos12-web",
       "version": "0.1.0",
       "dependencies": {
+        "@emailjs/browser": "^3.11.0",
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
         "@fontsource/roboto": "^5.0.3",
@@ -17,6 +18,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "emailjs": "^4.0.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
@@ -2295,6 +2297,14 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emailjs/browser": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-3.11.0.tgz",
+      "integrity": "sha512-RkY3FKZ3fPdK++OeF46mRTFpmmQWCHUVHZH209P3NE4D5sg2Atg7S2wa3gw5062Gl4clt4Wn5SyC4WhlVZC5pA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.11.0",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
@@ -7528,6 +7538,22 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.440.tgz",
       "integrity": "sha512-r6dCgNpRhPwiWlxbHzZQ/d9swfPaEJGi8ekqRBwQYaR3WmA5VkqQfBWSDDjuJU1ntO+W9tHx8OHV/96Q8e0dVw=="
     },
+    "node_modules/emailjs": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/emailjs/-/emailjs-4.0.2.tgz",
+      "integrity": "sha512-w/tldI93qO7uw9XzdwCCRR36OY/TYJxB81vEOmQkmxVDZOdrAnoQoOAvaMoDmmBUSoD1msyAIwBdKFWzC7lgKQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.3.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/emittery": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emailjs/browser": "^3.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.3",
@@ -12,6 +13,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "emailjs": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.jsx

@@ -21,7 +21,6 @@ import {createTheme, ThemeProvider} from '@mui/material/styles';
 import cards from './Card';
 import {createContext, useState} from "react";
 
-
 export const ThemeContext = createContext(null);
 
 // switch theme button ---------------------------------------------------------------

src/Contact.jsx

@@ -0,0 +1,53 @@
+import React, { useRef } from 'react';
+import emailjs from '@emailjs/browser';
+
+
+function Contact(){
+    const form = useRef();
+    const serviceKey = process.env.SERVICE_KEY;
+    const template = process.env.TEMPLATE;
+    const token = process.env.TOKEN;
+
+    function sendEmail(e) {
+        e.preventDefault();
+
+    emailjs.sendForm(serviceKey, template, form.current, token)
+      .then((result) => {
+          console.log(result.text);
+      }, (error) => {
+          console.log(error.text);
+      });
+    e.target.reset();
+
+    }
+
+    return <section id="contact">
+        <h2 className="contact">Contact</h2>
+        <div className="contactContainer">
+            <div className="col-lg-6">
+                <div className="contact-wrap">
+                    <div id="form-message-warning" className="mb-4 w-100 text-center"></div>
+                    <form method="POST" id="contactForm" name="contactForm" className="contactForm"
+                          noValidate="novalidate" ref={form} onSubmit={sendEmail}>
+                            <div className="col-md-12">
+                                <div className="form-group">
+                                    <h4 className="mail">Message</h4>
+                                    <textarea name="message" className="form-control" id="message" cols="30" rows="8"
+                                              placeholder="Message"></textarea>
+                                </div>
+                            </div>
+                            <div className="col-md-12">
+                                <div className="form-group">
+                                    <button type="submit" className="btn">Send Message</button>
+                                        <div className="submitting"></div>
+                                </div>
+                            </div>
+                    </form>
+                </div>
+            </div>
+
+        </div>
+    </section>
+}
+
+export default Contact;