feat: extend BetaBadge with link and galaxy tracking

snippets/components/Badges/BetaBadge.jsx

@@ -1,4 +1,6 @@
 
+import { galaxyOnClick } from '/snippets/lib/galaxy.jsx';
+
 const Icon = () => {
     return (
         <div className="betaIcon">
@@ -12,7 +14,22 @@ const Icon = () => {
     )
 }
 
-export const BetaBadge = () => {
+export const BetaBadge = ({ link, galaxyTrack, galaxyEvent }) => {
+    if (link) {
+        return (
+            <a
+                href={link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="betaBadge"
+                onClick={galaxyTrack && galaxyEvent ? galaxyOnClick(galaxyEvent) : undefined}
+            >
+                <Icon />
+                <span>Beta</span>
+            </a>
+        )
+    }
+
     return (
         <div className="betaBadge">
             <Icon />
@@ -26,4 +43,4 @@ export const BetaBadge = () => {
             </span>
         </div>
     )
-};
+};

snippets/components/BetaBadge/BetaBadge.jsx

@@ -1,14 +1,37 @@
-export const BetaBadge = () => {
+import { galaxyOnClick } from '/snippets/lib/galaxy.jsx';
+
+const Icon = () => {
     return (
-        <div className="betaBadge">
-            <div className="betaIcon">
+        <div className="betaIcon">
             <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     strokeWidth="1.25"
                     d="M7.35227 6.72731H8.29924C8.96212 6.72731 9.50189 6.86778 9.91856 7.14871C10.3384 7.42965 10.6461 7.78634 10.8419 8.21879C11.0407 8.65124 11.1402 9.09474 11.1402 9.54928C11.1402 10.0985 11.0123 10.5941 10.7566 11.036C10.5009 11.4748 10.149 11.8236 9.70076 12.0824C9.25253 12.3381 8.74116 12.4659 8.16667 12.4659C7.81629 12.4659 7.46907 12.4012 7.125 12.2718C6.78409 12.1392 6.48106 11.8883 6.21591 11.519L6.14015 11.5569V9.7008C6.14015 10.0101 6.21591 10.2958 6.36742 10.5578C6.5221 10.8198 6.7399 11.0297 7.02083 11.1875C7.30492 11.3454 7.64268 11.4243 8.03409 11.4243C8.44444 11.4243 8.79798 11.3375 9.0947 11.1639C9.39141 10.9903 9.62027 10.7614 9.78125 10.4773C9.94224 10.1932 10.0227 9.88388 10.0227 9.54928C10.0227 9.23363 9.95013 8.93533 9.80492 8.6544C9.66288 8.37031 9.46086 8.13988 9.19886 7.96311C8.94003 7.78318 8.63384 7.69322 8.2803 7.69322H7.35227V6.72731ZM7.90152 2.50383C8.3529 2.50383 8.75221 2.57643 9.09943 2.72163C9.44981 2.86683 9.74495 3.06254 9.98485 3.30875C10.2279 3.55181 10.411 3.82485 10.5341 4.12788C10.6604 4.43091 10.7235 4.74183 10.7235 5.06065C10.7235 5.45837 10.6225 5.85452 10.4205 6.24909C10.2184 6.64051 9.90909 6.96721 9.49242 7.22921C9.07576 7.48805 8.54546 7.61746 7.90152 7.61746H7.35227V6.65156H7.88258C8.24874 6.65156 8.56124 6.5758 8.82008 6.42428C9.08207 6.27277 9.28093 6.07548 9.41667 5.83243C9.55556 5.58937 9.625 5.33211 9.625 5.06065C9.625 4.62504 9.4577 4.26361 9.12311 3.97637C8.79167 3.68912 8.38447 3.54549 7.90152 3.54549C7.57955 3.54549 7.28441 3.61178 7.0161 3.74436C6.75095 3.87693 6.53788 4.06159 6.37689 4.29834C6.21907 4.53508 6.14015 4.80812 6.14015 5.11746V15.0606H5.02273V5.11746C5.02273 4.61873 5.14583 4.17207 5.39205 3.7775C5.64141 3.38293 5.98232 3.07201 6.41477 2.84474C6.85038 2.61746 7.34596 2.50383 7.90152 2.50383Z"
                 />
             </svg>
         </div>
+    )
+}
+
+export const BetaBadge = ({ link, galaxyTrack, galaxyEvent }) => {
+    if (link) {
+        return (
+            <a
+                href={link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="betaBadge"
+                onClick={galaxyTrack && galaxyEvent ? galaxyOnClick(galaxyEvent) : undefined}
+            >
+                <Icon />
+                <span>Beta</span>
+            </a>
+        )
+    }
+
+    return (
+        <div className="betaBadge">
+            <Icon />
             <span>
                 Beta feature.&nbsp;
                 <u>