From 455684c74937d7d82b9f9719234e297635241df6 Mon Sep 17 00:00:00 2001
From: szabomarton <szabomarton@gszi.edu.hu>
Date: Tue, 11 Feb 2025 12:59:23 +0100
Subject: [PATCH] added mailto button

---
 react_alap/mai/package-lock.json              |   1 +
 react_alap/mai/src/25_01_28/Connection.jsx    | 122 ++++++++++--------
 .../mai/src/25_01_28/Connection_form.jsx      |  56 ++++++++
 3 files changed, 127 insertions(+), 52 deletions(-)
 create mode 100644 react_alap/mai/src/25_01_28/Connection_form.jsx

diff --git a/react_alap/mai/package-lock.json b/react_alap/mai/package-lock.json
index a9e22a93..961539b5 100644
--- a/react_alap/mai/package-lock.json
+++ b/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": "*"
       }
diff --git a/react_alap/mai/src/25_01_28/Connection.jsx b/react_alap/mai/src/25_01_28/Connection.jsx
index e58d07d0..b0d9606d 100644
--- a/react_alap/mai/src/25_01_28/Connection.jsx
+++ b/react_alap/mai/src/25_01_28/Connection.jsx
@@ -3,62 +3,80 @@ 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(){
-    return (
-        <>
-            <Menu/>
-            <div className="contact-container">
-      <h1 className="contact-title">Kapcsolat</h1>
-      <p className="contact-subtitle">
-        Itt megtalálod az elérhetőségeimet és kapcsolatba léphetsz velem.
-      </p>
-      <div className="contact-links">
-        <div className="contact-item">
-          <FaFacebook className="contact-icon" />
-          <a
-            href="https://www.facebook.com/digivagyok"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Facebook - digivagyok
-          </a>
-        </div>
-        <div className="contact-item">
-          <FaLinkedin className="contact-icon" />
-          <a
-            href="https://www.linkedin.com/in/digivagyok"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            LinkedIn - digivagyok
-          </a>
-        </div>
-        <div className="contact-item">
-          <FaGithub className="contact-icon" />
-          <a
-            href="https://github.com/playermarci"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            GitHub - digivagyok
-          </a>
-        </div>
-        <div className="contact-item">
-          <FaTwitter className="contact-icon" />
-          <a
-            href="https://twitter.com/digivagyok"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Twitter - digivagyok
-          </a>
+function Connection() {
+  return (
+    <>
+      <Menu />
+      <div className="contact-container">
+        <h1 className="contact-title">Kapcsolat</h1>
+        <p className="contact-subtitle">
+          Itt megtalálod az elérhetőségeimet és kapcsolatba léphetsz velem.
+        </p>
+        <div className="contact-links">
+          <div className="contact-item">
+            <FaFacebook className="contact-icon" />
+            <a
+              href="https://www.facebook.com/digivagyok"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Facebook - digivagyok
+            </a>
+          </div>
+          <div className="contact-item">
+            <FaLinkedin className="contact-icon" />
+            <a
+              href="https://www.linkedin.com/in/digivagyok"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              LinkedIn - digivagyok
+            </a>
+          </div>
+          <div className="contact-item">
+            <FaGithub className="contact-icon" />
+            <a
+              href="https://github.com/playermarci"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              GitHub - digivagyok
+            </a>
+          </div>
+          <div className="contact-item">
+            <FaTwitter className="contact-icon" />
+            <a
+              href="https://twitter.com/digivagyok"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              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>
-    </div>
-        </>
-    )
+      
+    </>
+  )
 }
 
 export default Connection;
\ No newline at end of file
diff --git a/react_alap/mai/src/25_01_28/Connection_form.jsx b/react_alap/mai/src/25_01_28/Connection_form.jsx
new file mode 100644
index 00000000..b8c66558
--- /dev/null
+++ b/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;
\ No newline at end of file