Add sharing component

src/Components/ShareComponent/index.jsx

@@ -0,0 +1,67 @@
+import html2canvas from "html2canvas";
+import ShareIcon from "@mui/icons-material/Share";
+import { Button } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+const ShareComponent = ({ elementToCapture, fileName }) => {
+	const theme = useTheme();
+	const captureAndShare = async () => {
+		try {
+			// Temporarily apply styles directly to the element
+			const originalBackground = elementToCapture.current.style.background;
+			const originalPadding = elementToCapture.current.style.padding;
+
+			elementToCapture.current.style.background = `radial-gradient(circle, ${theme.palette.gradient.color1}, ${theme.palette.gradient.color2}, ${theme.palette.gradient.color3}, ${theme.palette.gradient.color4}, ${theme.palette.gradient.color5})`;
+			elementToCapture.current.style.padding = `${theme.spacing(20)}`;
+
+			// Capture the element directly
+			const canvas = await html2canvas(elementToCapture.current, {
+				useCORS: true,
+				scale: 2,
+				allowTaint: true,
+				backgroundColor: null,
+			});
+
+			// Restore original styles
+			elementToCapture.current.style.background = originalBackground;
+			elementToCapture.current.style.padding = originalPadding;
+
+			const imageBlob = await new Promise((resolve) =>
+				canvas.toBlob(resolve, "image/png")
+			);
+
+			const file = new File([imageBlob], `${fileName}.png`, {
+				type: "image/png",
+			});
+
+			if (navigator.share) {
+				await navigator.share({
+					files: [file],
+					title: "Screenshot",
+					text: "Check out this screenshot!",
+				});
+			} else {
+				const url = URL.createObjectURL(imageBlob);
+				const a = document.createElement("a");
+				a.href = url;
+				a.download = `${fileName}.png`;
+				a.click();
+				URL.revokeObjectURL(url);
+			}
+		} catch (error) {
+			console.error(error);
+		}
+	};
+	return (
+		<Button
+			variant="outlined"
+			startIcon={<ShareIcon sx={{ color: theme.palette.success.main }} />}
+			color="success"
+			onClick={captureAndShare}
+		>
+			Share
+		</Button>
+	);
+};
+
+export default ShareComponent;