v0.11.7 Create new directory for reusable components, and created new component, ResumeDownloader
This commit is contained in:
parent
bc0d704602
commit
9832701e61
5 changed files with 57 additions and 1 deletions
27
src/shared/components/resumeDownloader/ResumeDownloader.jsx
Normal file
27
src/shared/components/resumeDownloader/ResumeDownloader.jsx
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
import React from "react";
|
||||||
|
import styles from "./ResumeDownloader.module.css";
|
||||||
|
|
||||||
|
const ResumeDownload = ({ resumeLink }) => {
|
||||||
|
const handleDownload = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = resumeLink;
|
||||||
|
console.log(link.href);
|
||||||
|
link.download = "Murtadha.pdf";
|
||||||
|
link.target = "_blank";
|
||||||
|
link.rel = "noopener noreferrer";
|
||||||
|
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button onClick={handleDownload} className={styles.button}>
|
||||||
|
Download Resume (PDF)
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ResumeDownload;
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
.button {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border: 2px solid #ff6600;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
min-width: 180px;
|
||||||
|
line-height: 1.5;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: #ff6600;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.button {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 250px;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1 +1 @@
|
||||||
0.11.5
|
0.11.7
|
||||||
Loading…
Add table
Add a link
Reference in a new issue