fix:Clickable Links and Responsive Badges (#1565)

reactplay · Oct 24, 2024 · eb55421 · eb55421
1 parent 81ff5ae
commit eb55421
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git 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,17 +20,18 @@ 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={{
                           backgroundImage: `url(${badge.image})`
                         }}
                       />
                     </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
@@ -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>