Use Badges for release status in version dropdown

Author: MattIPv4

apps/site/components/Downloads/Release/VersionDropdown.tsx

@@ -13,20 +13,27 @@ import {
 import type { NodeReleaseStatus } from '#site/types/releases.js';
 import type { FC } from 'react';
 
-const getDropDownStatus = (version: string, status: NodeReleaseStatus) => {
+const getDropDownStatus = (status: NodeReleaseStatus) => {
   if (status === 'LTS') {
-    return `${version} (LTS)`;
+    return {
+      label: 'LTS',
+      kind: 'info' as const,
+    };
   }
 
   if (status === 'Current') {
-    return `${version} (Current)`;
+    return {
+      label: 'Current',
+      kind: 'default' as const,
+    };
   }
 
   if (status === 'End-of-life') {
-    return `${version} (EoL)`;
+    return {
+      label: 'EoL',
+      kind: 'warning' as const,
+    };
   }
-
-  return version;
 };
 
 const VersionDropdown: FC = () => {
@@ -61,7 +68,8 @@ const VersionDropdown: FC = () => {
       ariaLabel={t('layouts.download.dropdown.version')}
       values={releases.map(({ status, versionWithPrefix }) => ({
         value: versionWithPrefix,
-        label: getDropDownStatus(versionWithPrefix, status),
+        label: versionWithPrefix,
+        badge: getDropDownStatus(status),
       }))}
       defaultValue={release.versionWithPrefix}
       onChange={setVersionOrNavigate}

packages/ui-components/src/Common/Select/StatelessSelect/index.tsx

@@ -2,6 +2,8 @@ import { ChevronDownIcon } from '@heroicons/react/24/solid';
 import classNames from 'classnames';
 import { useId, useMemo } from 'react';
 
+import Badge from '#ui/Common/Badge';
+
 import type { SelectGroup, SelectProps } from '#ui/Common/Select';
 import type { LinkLike } from '#ui/types';
 
@@ -66,6 +68,15 @@ const StatelessSelect = <T extends string>({
             <span className={styles.selectedValue}>
               {currentItem.iconImage}
               <span>{currentItem.label}</span>
+              {currentItem.badge && (
+                <Badge
+                  size="small"
+                  kind={currentItem.badge.kind}
+                  className={styles.badge}
+                >
+                  {currentItem.badge.label}
+                </Badge>
+              )}
             </span>
           )}
           {!currentItem && (
@@ -89,7 +100,13 @@ const StatelessSelect = <T extends string>({
               )}
 
               {items.map(
-                ({ value, label, iconImage, disabled: itemDisabled }) => (
+                ({
+                  value,
+                  label,
+                  iconImage,
+                  badge,
+                  disabled: itemDisabled,
+                }) => (
                   <Component
                     key={value}
                     href={value}
@@ -101,6 +118,15 @@ const StatelessSelect = <T extends string>({
                   >
                     {iconImage}
                     <span>{label}</span>
+                    {badge && (
+                      <Badge
+                        size="small"
+                        kind={badge.kind}
+                        className={styles.badge}
+                      >
+                        {badge.label}
+                      </Badge>
+                    )}
                   </Component>
                 )
               )}

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

@@ -109,6 +109,10 @@
     @apply text-neutral-600
       dark:text-neutral-400;
   }
+
+  .badge {
+    @apply ml-auto;
+  }
 }
 
 .dropdown:has(.label) .text > span {

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

@@ -5,6 +5,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import classNames from 'classnames';
 import { useId, useMemo, useState } from 'react';
 
+import Badge, { type BadgeKind } from '#ui/Common/Badge';
 import Skeleton from '#ui/Common/Skeleton';
 
 import type { FormattedMessage, LinkLike } from '#ui/types';
@@ -18,6 +19,10 @@ export type SelectValue<T extends string> = {
   label: FormattedMessage | string;
   value: T;
   iconImage?: ReactElement<SVGSVGElement>;
+  badge?: {
+    label: FormattedMessage | string;
+    kind?: BadgeKind;
+  };
   disabled?: boolean;
 };
 
@@ -89,7 +94,7 @@ const Select = <T extends string>({
           </SelectPrimitive.Label>
         )}
 
-        {items.map(({ value, label, iconImage, disabled }) => (
+        {items.map(({ value, label, iconImage, badge, disabled }) => (
           <SelectPrimitive.Item
             key={value}
             value={value}
@@ -99,6 +104,11 @@ const Select = <T extends string>({
             <SelectPrimitive.ItemText>
               {iconImage}
               <span>{label}</span>
+              {badge && (
+                <Badge size="small" kind={badge.kind} className={styles.badge}>
+                  {badge.label}
+                </Badge>
+              )}
             </SelectPrimitive.ItemText>
           </SelectPrimitive.Item>
         ))}
@@ -149,6 +159,15 @@ const Select = <T extends string>({
                 <>
                   {currentItem.iconImage}
                   <span>{currentItem.label}</span>
+                  {currentItem.badge && (
+                    <Badge
+                      size="small"
+                      kind={currentItem.badge.kind}
+                      className={styles.badge}
+                    >
+                      {currentItem.badge.label}
+                    </Badge>
+                  )}
                 </>
               )}
             </SelectPrimitive.Value>