feat: icons with versions

Author: ovflowd

apps/site/next.mdx.use.mjs

@@ -1,5 +1,7 @@
 'use strict';
 
+import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup';
+
 import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable';
 import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings';
 import WithBadgeGroup from './components/withBadgeGroup';
@@ -21,4 +23,6 @@ export const mdxComponents = {
   WithBadgeGroup: WithBadgeGroup,
   // Renders an container for Upcoming Node.js Meetings
   UpcomingMeetings: UpcomingMeetings,
+  // Standalone Badge Group
+  BadgeGroup: BadgeGroup,
 };

apps/site/pages/en/index.mdx

@@ -26,6 +26,22 @@ layout: home
         <br />
         <small className="!text-xs">for Node.js 18 and below</small>
       </Button>
+
+      <div className="flex flex-row gap-2 justify-center mt-6">
+        <WithNodeRelease status="Current">
+          {({ release }) =>
+            <BadgeGroup as="span" size="small" badgeText={release.versionWithPrefix}>
+              <Link href={`/blog/release/${release.versionWithPrefix}`}>Node.js Current</Link>
+            </BadgeGroup>}
+        </WithNodeRelease>
+
+        <WithNodeRelease status="LTS">
+          {({ release }) =>
+            <BadgeGroup as="span" size="small" kind="warning" badgeText={release.versionWithPrefix}>
+              <Link href={`/blog/release/${release.versionWithPrefix}`}>Node.js LTS</Link>
+            </BadgeGroup>}
+        </WithNodeRelease>
+      </div>
     </div>
 
   </div>

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

@@ -4,9 +4,10 @@ import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
 import styles from './index.module.css';
 
 type BadgeKind = 'default' | 'warning' | 'error';
+type BadgeSize = 'small' | 'medium';
 
 type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
-  size?: 'small' | 'medium';
+  size?: BadgeSize;
   kind?: BadgeKind;
 };
 

packages/ui-components/src/Common/BadgeGroup/index.module.css

@@ -35,7 +35,8 @@
         dark:text-green-300;
     }
 
-    .message {
+    .message,
+    .message a:not(:hover) {
       @apply text-green-700
         dark:text-green-300;
     }
@@ -52,7 +53,8 @@
         dark:text-danger-300;
     }
 
-    .message {
+    .message,
+    .message a:not(:hover) {
       @apply text-danger-700
         dark:text-danger-300;
     }
@@ -69,7 +71,8 @@
         dark:text-warning-300;
     }
 
-    .message {
+    .message,
+    .message a:not(:hover) {
       @apply text-warning-700
         dark:text-warning-300;
     }

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

@@ -14,6 +14,16 @@ export const Default: Story = {
   },
 };
 
+export const SmallDefault: Story = {
+  args: {
+    href: '/',
+    children: 'OpenJS Foundation Certification 2023',
+    kind: 'default',
+    badgeText: 'New',
+    size: 'small',
+  },
+};
+
 export const Error: Story = {
   args: {
     href: '/',

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

@@ -6,28 +6,30 @@ import type { LinkLike } from '#ui/types';
 
 import styles from './index.module.css';
 
-type BadgeGroupKind = 'default' | 'warning' | 'error';
-
 type BadgeGroupProps = {
-  kind?: BadgeGroupKind;
+  kind?: ComponentProps<typeof Badge>['kind'];
+  size?: ComponentProps<typeof Badge>['size'];
   badgeText?: string;
   as: LinkLike;
 } & ComponentProps<LinkLike>;
 
 const BadgeGroup: FC<PropsWithChildren<BadgeGroupProps>> = ({
   kind = 'default',
+  size = 'medium',
   badgeText,
   children,
   as: Component = 'a',
   ...args
 }) => (
   <Component className={`${styles.wrapper} ${styles[kind]}`} {...args}>
     {badgeText && (
-      <Badge kind={kind} className={styles.badge}>
+      <Badge kind={kind} size={size} className={styles.badge}>
         {badgeText}
       </Badge>
     )}
+
     <span className={styles.message}>{children}</span>
+
     {args.href && <ArrowRightIcon className={styles.icon} />}
   </Component>
 );

turbo.json

@@ -1,6 +1,7 @@
 {
   "$schema": "https://turbo.build/schema.json",
   "dangerouslyDisablePackageManagerCheck": true,
+  "ui": "tui",
   "tasks": {
     "//#prettier": {
       "outputs": [".prettiercache"]