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