added mailto button

react_alap/mai/package-lock.json

@@ -13715,6 +13715,7 @@
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
       "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==",
+      "license": "MIT",
       "peerDependencies": {
         "react": "*"
       }

react_alap/mai/src/25_01_28/Connection.jsx

@@ -3,6 +3,11 @@ import { Link } from "react-router-dom";
 import Menu from "./Menu";
 import "./CSS/Contact.css";
 import { FaFacebook, FaLinkedin, FaGithub, FaTwitter } from "react-icons/fa";
+import { MdEmail } from "react-icons/md";
+import Connection_form from "./Connection_form";
+
+const email = "digivagyok@gmail.com";
+const mailto = "mailto:digivagyok@gmail.com";
 
 
 function Connection() {
@@ -55,8 +60,21 @@ function Connection(){
               Twitter - digivagyok
             </a>
           </div>
+          <div className="contact-item">
+            <MdEmail className="contact-icon" />
+            <a
+              href={mailto}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Email: - {email}
+            </a>
           </div>
         </div>
+        <Connection_form>
+      </Connection_form>
+      </div>
+      
     </>
   )
 }

react_alap/mai/src/25_01_28/Connection_form.jsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import React from "react";
+import { Link } from "react-router-dom";
+
+const ButtonMailto = ({mailto, label}) => {
+    return (
+        <Link
+            to='#'
+            onClick={(e) => {
+                window.location.href = mailto;
+                e.preventDefault();
+            }}
+        >
+            {label}
+        </Link>
+    );
+};
+
+var mailto = "mailto:digivagyok@gmail.com?";
+const mailtoAlap = "mailto:digivagyok@gmail.com";
+
+
+function Connection_form(){
+    const [user, setUser] = useState({});
+
+    let feldolgoz = () => {
+        mailto = `${mailtoAlap}?subject=${user.name}&body=${user.body}`;
+    }
+
+    let eventHandling = (event) => {
+        setUser({
+            ...user,
+            [event.target.name]: event.target.value
+        });
+
+        feldolgoz();
+
+    }
+
+    
+
+    return (
+        <>
+        <form href={mailtoAlap}>
+            <label>Név:</label>
+            <input type="text" name="name" value={user.name} onChange={(event) => eventHandling(event)}></input>
+            <input type="text" name="body" value={user.body} onChange={(event) => eventHandling(event)}></input>
+            <ButtonMailto label="Write me an E-Mail" mailto={mailto}/>
+            
+        </form>
+        <p>{mailto}</p>
+        </>
+    )
+}
+
+export default Connection_form;