szabomarton/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added mailto button

Browse Source
This commit is contained in:
szabomarton 2025-02-11 12:59:23 +01:00
parent e451129877
commit 455684c749
3 changed files with 127 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
react_alap/mai/package-lock.json generated
View File

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

122
react_alap/mai/src/25_01_28/Connection.jsx
View File

@ -3,62 +3,80 @@ import { Link } from "react-router-dom";
import Menu from "./Menu"; import Menu from "./Menu";
import "./CSS/Contact.css"; import "./CSS/Contact.css";
import { FaFacebook, FaLinkedin, FaGithub, FaTwitter } from "react-icons/fa"; 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(){ function Connection() {
return ( return (
<> <>
<Menu/> <Menu />
<div className="contact-container"> <div className="contact-container">
<h1 className="contact-title">Kapcsolat</h1> <h1 className="contact-title">Kapcsolat</h1>
<p className="contact-subtitle"> <p className="contact-subtitle">
Itt megtalálod az elérhetőségeimet és kapcsolatba léphetsz velem. Itt megtalálod az elérhetőségeimet és kapcsolatba léphetsz velem.
</p> </p>
<div className="contact-links"> <div className="contact-links">
<div className="contact-item"> <div className="contact-item">
<FaFacebook className="contact-icon" /> <FaFacebook className="contact-icon" />
<a <a
href="https://www.facebook.com/digivagyok" href="https://www.facebook.com/digivagyok"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
Facebook - digivagyok Facebook - digivagyok
</a> </a>
</div> </div>
<div className="contact-item"> <div className="contact-item">
<FaLinkedin className="contact-icon" /> <FaLinkedin className="contact-icon" />
<a <a
href="https://www.linkedin.com/in/digivagyok" href="https://www.linkedin.com/in/digivagyok"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
LinkedIn - digivagyok LinkedIn - digivagyok
</a> </a>
</div> </div>
<div className="contact-item"> <div className="contact-item">
<FaGithub className="contact-icon" /> <FaGithub className="contact-icon" />
<a <a
href="https://github.com/playermarci" href="https://github.com/playermarci"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
GitHub - digivagyok GitHub - digivagyok
</a> </a>
</div> </div>
<div className="contact-item"> <div className="contact-item">
<FaTwitter className="contact-icon" /> <FaTwitter className="contact-icon" />
<a <a
href="https://twitter.com/digivagyok" href="https://twitter.com/digivagyok"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
Twitter - digivagyok Twitter - digivagyok
</a> </a>
</div>
<div className="contact-item">
<MdEmail className="contact-icon" />
<a
href={mailto}
target="_blank"
rel="noopener noreferrer"
>
Email: - {email}
</a>
</div>
</div> </div>
<Connection_form>
</Connection_form>
</div> </div>
</div>
</> </>
) )
} }
export default Connection; export default Connection;

56
react_alap/mai/src/25_01_28/Connection_form.jsx Normal file
View File

@ -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;