diff --git "a/src/assets/\302\265Learn.png" "b/src/assets/\302\265Learn.png" new file mode 100644 index 000000000..40881aa27 Binary files /dev/null and "b/src/assets/\302\265Learn.png" differ diff --git a/src/modules/Dashboard/modules/Profile/components/Certificate/Certificate.module.css b/src/modules/Dashboard/modules/Profile/components/Certificate/Certificate.module.css new file mode 100644 index 000000000..28d9cbcb6 --- /dev/null +++ b/src/modules/Dashboard/modules/Profile/components/Certificate/Certificate.module.css @@ -0,0 +1,29 @@ +.certificate_container { + display: flex; + align-items: center; /* Centers horizontally */ + justify-content: center; /* Centers vertically */ + margin-top: 20px; +} + +.certificate { + padding: 20px; + border: 2px solid #000; + border-radius: 10px; + width: 80%; + text-align: center; + background-color: #20151d; +} + +.certificate h1 { + font-size: 24px; + font-weight: bold; +} + +.certificate p { + font-size: 18px; + margin-bottom: 10px; +} + +.certificate strong { + font-weight: bold; +} diff --git a/src/modules/Dashboard/modules/Profile/components/Certificate/Certificate.tsx b/src/modules/Dashboard/modules/Profile/components/Certificate/Certificate.tsx new file mode 100644 index 000000000..f051b8abe --- /dev/null +++ b/src/modules/Dashboard/modules/Profile/components/Certificate/Certificate.tsx @@ -0,0 +1,121 @@ +import React, { useRef, useEffect } from "react"; +import html2canvas from "html2canvas"; +import MulearnBrand from "../../assets/svg/MulearnBrand"; + +type CertificateProps = { + name: string; + muid: string; + level: number; + karma: number; + interestGroups: string[]; +}; + +const Certificate: React.FC = ({ + name, + muid, + level, + karma, + interestGroups +}) => { + const pdfElement = useRef(null); + + useEffect(() => { + handleDownloadPDF(); + }, []); + + const handleDownloadPDF = () => { + html2canvas(pdfElement.current!).then(canvas => { + const imgData = canvas.toDataURL("image/png"); + // Create a link element + const link = document.createElement("a"); + // Set the download attribute with a filename + link.download = "Certificate.png"; + // Set the href attribute to the image data URL + link.href = imgData; + // Append the link to the document body (this is necessary for Firefox) + document.body.appendChild(link); + // Trigger the download + link.click(); + // Remove the link from the document + document.body.removeChild(link); + }); + }; +// MODIFY THIS RETURN TO STYLE THE CERTIFICATE + return ( + <> +
+
+
+ +
+

+ Certificate of Achievement +

+
+ This is to certify that {name + " "} + has successfully achieved Level: {level + " "} + with a total of {karma} Karma points +
+ and is actively participating in the following interest + groups: + {" " + interestGroups.join(", ") + " "} +
+ muID: {muid} +
+
+ Signature: __________________________ +
+ muLearn Team +
+ Dated: {new Date().toLocaleDateString()} +
+
+
+ + ); +}; + +export default Certificate; diff --git a/src/modules/Dashboard/modules/Profile/components/ShareProfilePopUp/pages/ShareProfilePopUp.module.css b/src/modules/Dashboard/modules/Profile/components/ShareProfilePopUp/pages/ShareProfilePopUp.module.css index e404c71b3..b8982e9a6 100644 --- a/src/modules/Dashboard/modules/Profile/components/ShareProfilePopUp/pages/ShareProfilePopUp.module.css +++ b/src/modules/Dashboard/modules/Profile/components/ShareProfilePopUp/pages/ShareProfilePopUp.module.css @@ -16,7 +16,7 @@ .share_pop_up { margin: 15dvh auto auto; height: auto; - width: 400px; + width: 450px; background: white; border-radius: 10px; box-shadow: 1px 1px 20px 1px #8c8c8c47; @@ -39,10 +39,12 @@ } & button { + width: 100%; padding: 16px; - background: #f3f3f4; + background: red; border-radius: 10px; + color: white } .profile_state { @@ -64,6 +66,7 @@ gap: 10px; width: 100%; + .embed_copy_btn { background: #456ff6; color: #fff; @@ -188,4 +191,4 @@ .share_pop_up_container .share_pop_up { width: 90vw; } -} +} \ No newline at end of file diff --git a/src/modules/Dashboard/modules/Profile/components/ShareProfilePopUp/pages/ShareProfilePopUp.tsx b/src/modules/Dashboard/modules/Profile/components/ShareProfilePopUp/pages/ShareProfilePopUp.tsx index 38979b04f..67a921f78 100644 --- a/src/modules/Dashboard/modules/Profile/components/ShareProfilePopUp/pages/ShareProfilePopUp.tsx +++ b/src/modules/Dashboard/modules/Profile/components/ShareProfilePopUp/pages/ShareProfilePopUp.tsx @@ -1,9 +1,13 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useRef } from "react"; +import ReactDOM from "react-dom"; import styles from "./ShareProfilePopUp.module.css"; import { Switch } from "@chakra-ui/react"; import { MuButton } from "@/MuLearnComponents/MuButtons/MuButton"; import { saveAs } from "file-saver"; import { fetchQRCode } from "../services/api"; +import Certificate from "../../Certificate/Certificate"; + +import html2canvas from "html2canvas"; type Props = { popUP: boolean; @@ -14,32 +18,63 @@ type Props = { putIsPublic: (isPublic: boolean) => void; }; -const ShareProfilePopUp = (props: Props) => { +const ShareProfilePopUp: React.FC = props => { const [copy, setCopy] = useState(false); const [blob, setBlob] = useState(); const [embedSize, setEmbedSize] = useState("100px"); + const certificateRef = useRef(null); + useEffect(() => { fetchQRCode(setBlob); }, []); + useEffect(() => { window.history.pushState(null, "", window.location.href); window.addEventListener("popstate", () => { props.setPopUP(false); }); }, [props.popUP]); + const downloadQR = () => { saveAs(blob, `${props.userProfile.muid}.png`); }; + + const downloadPNG = () => { + if (certificateRef.current) { + html2canvas(certificateRef.current).then((canvas) => { + const imgData = canvas.toDataURL('image/png'); + const link = document.createElement('a'); + link.href = imgData; + link.download = 'certificate.png'; + link.click(); + }); + } + }; + + const openCertificateInNewTab = () => { + const newTab = window.open('', '_blank'); + if (newTab) { + const certificateComponent = ( + + ); + newTab.document.body.innerHTML = '
'; + ReactDOM.render(certificateComponent, newTab.document.getElementById('certificate-root')); + } + }; + return ( <>
{ @@ -70,19 +105,16 @@ const ShareProfilePopUp = (props: Props) => { {props.profileStatus && (
- + QR Code
- {/* Todo: Reusable copy link component */}

{ import.meta.env .VITE_FRONTEND_URL as string } - /profile/ - {props.userProfile.muid} + /profile/{props.userProfile.muid}

- { navigator.clipboard.writeText( @@ -100,11 +132,9 @@ const ShareProfilePopUp = (props: Props) => { }} className="fi fi-sr-link" > - {/* Todo: Create as left Side Tooltip Component for below component */}

{!copy ? "Copy" : "Copied!"}

- {/* Todo: Create as left Side Tooltip Component for above component*/}
@@ -141,25 +171,38 @@ const ShareProfilePopUp = (props: Props) => { { - downloadQR(); - }} + onClick={downloadQR} />
)} - +
+ + +
@@ -167,4 +210,4 @@ const ShareProfilePopUp = (props: Props) => { ); }; -export default ShareProfilePopUp; +export default ShareProfilePopUp; \ No newline at end of file