Added Share and Download Button to the Badges (#316)

* added * updated position of buttons
kartikmehta18 · Jul 6, 2024 · 2131723 · 2131723
1 parent 1be46e7
commit 2131723
Showing 1 changed file with 72 additions and 7 deletions.
diff --git a/pages/leaderboard.js b/pages/leaderboard.js
@@ -154,6 +154,7 @@ function Leaderboard() {
   const [activePage, setActivePage] = useState(1);
   const { height, width } = useWindowDimensions();
   const [itemsPerPage, setItemsPerPage] = useState(50); // default items per page
+  const [imageClicked, setImageClicked] = useState(false); // used in badge sharing
   let rows = [];
 
   function createData(
@@ -341,6 +342,43 @@ function Leaderboard() {
     handlePageChange(0);
   };
 
+  const shareBadge = (badgeImageUrl) => {
+    // Fetch the image from your server
+    fetch(badgeImageUrl)
+      .then(response => response.blob())
+      .then(imageBlob => {
+        const imageFile = new File([imageBlob], 'badge.png', { type: 'image/png' });
+        const shareData = {
+          files: [imageFile],
+          title: 'Happy to contribute',
+          text: 'Check out my badge!',
+        };
+        navigator.share(shareData)
+          .then(() => {
+            console.log('Shared on Twitter');
+          })
+          .catch((error) => {
+            console.log('Error sharing on Twitter:', error);
+          });
+      });
+  };
+
+  const downloadImage = (badgeImageUrl) => {
+    fetch(badgeImageUrl)
+      .then(response => response.blob())
+      .then(imageBlob => {
+        const imageFile = new File([imageBlob], 'badge.png', { type: 'image/png' });
+        const imageURL = URL.createObjectURL(imageFile);
+        const link = document.createElement('a');
+        link.href = imageURL;
+        link.download = 'badge.png';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      });
+  };
+
+
   useEffect(() => {
     if ((activePage - 1) * itemsPerPage + itemsPerPage < searchData.length) {
       setLeaderss(
@@ -941,13 +979,40 @@ function Leaderboard() {
                           <div className="flex flex-wrap pt-4 gap-2">
                               {
                                 badges.map((badge, i) => {
-                                  return <Image
-                                          src={badge.badge}
-                                          key={i}
-                                          width={70}
-                                          height={70}
-                                          id={`badge-${i}-${i}`}
-                                        />
+                                  return (
+                                    <div key={i} className="relative w-auto group">
+                                      <Image
+                                        className="w-full h-auto opacity-100 transition-opacity duration-500 ease-in-out group-hover:opacity-50"
+                                        src={badge.badge}
+                                        width={70}
+                                        height={70}
+                                        id={`badge-${i}-${i}`}
+                                        alt={`Badge ${i}`}
+                                        onMouseOver={() => setImageClicked(true)}
+
+                                      />
+                                      {imageClicked && (
+                                      <div className="opacity-0 transition-opacity duration-500 ease-in-out absolute top-3/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center group-hover:opacity-100">
+                                        <div className="flex w-full space-x-2">
+                                          <button
+                                            onClick={() => shareBadge(badge.badge)}
+                                            className="bg-gray-700 w-1/2 p-2.5 rounded-full"
+                                            disabled={!imageClicked}
+                                          >
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" fill="#ffffff" viewBox="0 0 512 512"><path d="M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z"/></svg>
+                                          </button>
+                                          <button
+                                            onClick={() => downloadImage( badge.badge)}
+                                            className="bg-blue-700 w-1/2 p-1 rounded-full"
+                                            disabled={!imageClicked}
+                                          >
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="25px" height="25px"  fill="#ffffff" viewBox="0 0 512 512"><path d="M376.9 294.6c4.5-4.2 7.1-10.1 7.1-16.3c0-12.3-10-22.3-22.3-22.3H304V160c0-17.7-14.3-32-32-32l-32 0c-17.7 0-32 14.3-32 32v96H150.3C138 256 128 266 128 278.3c0 6.2 2.6 12.1 7.1 16.3l107.1 99.9c3.8 3.5 8.7 5.5 13.8 5.5s10.1-2 13.8-5.5l107.1-99.9z"/></svg>
+                                          </button>
+                                        </div>
+                                      </div>
+                                      )}
+                                    </div>
+                                  );
                                 })
                               }
                           </div>