chore: updated pills text and badge group behaviour (#7997)

Author: ovflowd

apps/site/components/withBadgeGroup.tsx

@@ -15,6 +15,9 @@ const WithBadgeGroup: FC<{ section: string }> = ({ section }) => {
         badgeText={badge.title}
         kind={badge.kind}
         href={badge.link}
+        // Ensure that External Links have a target="_blank" and an arrow icon
+        // indicating that the link is external and should open in a new tab
+        target={/^https?:/.test(badge.link) ? '_blank' : undefined}
       >
         {badge.text}
       </BadgeGroup>

apps/site/pages/en/index.mdx

@@ -31,14 +31,14 @@ layout: home
         <WithNodeRelease status="Active LTS">
           {({ release }) =>
             <BadgeGroup size="small" kind="info" badgeText={release.versionWithPrefix} href={`/blog/release/${release.versionWithPrefix}`}>
-              Node.js LTS
+              Latest LTS
             </BadgeGroup>}
         </WithNodeRelease>
 
         <WithNodeRelease status="Current">
           {({ release }) =>
             <BadgeGroup size="small" badgeText={release.versionWithPrefix} href={`/blog/release/${release.versionWithPrefix}`}>
-              Node.js Current
+              Latest Release
             </BadgeGroup>}
         </WithNodeRelease>
       </div>

packages/ui-components/src/Common/BadgeGroup/index.tsx

@@ -1,4 +1,4 @@
-import ArrowRightIcon from '@heroicons/react/24/solid/ArrowRightIcon';
+import ArrowUpRightIcon from '@heroicons/react/24/solid/ArrowUpRightIcon';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 
 import Badge from '#ui/Common/Badge';
@@ -30,7 +30,7 @@ const BadgeGroup: FC<PropsWithChildren<BadgeGroupProps>> = ({
 
     <span className={styles.message}>{children}</span>
 
-    {args.href && <ArrowRightIcon className={styles.icon} />}
+    {args.target === '_blank' && <ArrowUpRightIcon className={styles.icon} />}
   </Component>
 );