From eb55421eccf8d6c0501de8bd24e0a841aaa8c029 Mon Sep 17 00:00:00 2001
From: Krish Rakesh Dave <116882111+KrishDave1@users.noreply.github.com>
Date: Thu, 24 Oct 2024 12:51:04 +0530
Subject: [PATCH] fix:Clickable Links and Responsive Badges (#1565)

---
 src/common/badges-dashboard/Badge.jsx        | 11 ++++++-----
 src/common/badges-dashboard/BadgeDetails.jsx | 12 +++++++++++-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/common/badges-dashboard/Badge.jsx b/src/common/badges-dashboard/Badge.jsx
index c655353915..fd956a2a02 100644
--- a/src/common/badges-dashboard/Badge.jsx
+++ b/src/common/badges-dashboard/Badge.jsx
@@ -11,7 +11,7 @@ const Badge = ({ badge, selectionChanged, readonly = false, showtext = true }) =
           />
         </div>
       ) : (
-        <div class="p-4 w-full">
+        <div class="p-4 max-w-72">
           <div>
             <div class="relative group ">
               <div>
@@ -20,8 +20,8 @@ const Badge = ({ badge, selectionChanged, readonly = false, showtext = true }) =
                   class="relative px-2 py-4 rounded-lg leading-none flex items-center divide-x divide-gray-600 w-full transition duration-1000  group-hover:shadow-md group-hover:drop-shadow-xl"
                   onClick={() => selectionChanged()}
                 >
-                  <div class="flex flex-row lg:flex-col items-center space-x-5  w-full justify-center">
-                    <div className="py-8 flex justify-center items-center">
+                  <div class="flex flex-row lg:flex-col items-center space-x-5  w-full justify-evenly">
+                    <div className="w-2/5 py-8 flex justify-center items-center">
                       <div
                         className="bg-cover bg-center h-28 w-28 group-hover:scale-125 ease-in duration-300"
                         style={{
@@ -29,8 +29,9 @@ const Badge = ({ badge, selectionChanged, readonly = false, showtext = true }) =
                         }}
                       />
                     </div>
-
-                    {showtext && <div class="pr-6 text-gray-800 text-sm h-8">{badge.level}</div>}
+                    <div class="w-3/5 flex justify-center flex-wrap">
+                      {showtext && <div class="pr-6 text-gray-800 text-sm">{badge.level}</div>}
+                    </div>
                   </div>
                 </button>
               </div>
diff --git a/src/common/badges-dashboard/BadgeDetails.jsx b/src/common/badges-dashboard/BadgeDetails.jsx
index bff5e9fe1e..893bf60b19 100644
--- a/src/common/badges-dashboard/BadgeDetails.jsx
+++ b/src/common/badges-dashboard/BadgeDetails.jsx
@@ -2,6 +2,16 @@ import Badge from './Badge';
 import './badge.css';
 
 const BadgeDetails = ({ badge, onClose }) => {
+  const makeClickableLinks = (badge) => {
+    const linkPattern = /(\w+)\s?\((https?:\/\/[^)]+)\)/g;
+
+    const descriptionWithLinks = badge.description.replace(linkPattern, (match, name, url) => {
+      return `<a href="${url}" target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:underline">${name}</a>`;
+    });
+
+    return <span dangerouslySetInnerHTML={{ __html: descriptionWithLinks }} />;
+  };
+
   return (
     <div
       aria-hidden="true"
@@ -49,7 +59,7 @@ const BadgeDetails = ({ badge, onClose }) => {
               </div>
               <div className="flex-1 flex justify-center items-center">
                 <p class="text-base leading-relaxed text-gray-500 dark:text-gray-600">
-                  {badge.description}
+                  {makeClickableLinks(badge)}
                 </p>
               </div>
             </div>