@@ -5,6 +5,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
55import classNames from 'classnames' ;
66import { useEffect , useId , useMemo , useState } from 'react' ;
77
8+ import Badge , { type BadgeKind } from '#ui/Common/Badge' ;
89import Skeleton from '#ui/Common/Skeleton' ;
910
1011import type { FormattedMessage , LinkLike } from '#ui/types' ;
@@ -18,6 +19,10 @@ export type SelectValue<T extends string> = {
1819 label : FormattedMessage | string ;
1920 value : T ;
2021 iconImage ?: ReactElement < SVGSVGElement > ;
22+ badge ?: {
23+ label : FormattedMessage | string ;
24+ kind ?: BadgeKind ;
25+ } ;
2126 disabled ?: boolean ;
2227} ;
2328
@@ -91,7 +96,7 @@ const Select = <T extends string>({
9196 </ SelectPrimitive . Label >
9297 ) }
9398
94- { items . map ( ( { value, label, iconImage, disabled } ) => (
99+ { items . map ( ( { value, label, iconImage, badge , disabled } ) => (
95100 < SelectPrimitive . Item
96101 key = { value }
97102 value = { value }
@@ -101,6 +106,11 @@ const Select = <T extends string>({
101106 < SelectPrimitive . ItemText >
102107 { iconImage }
103108 < span > { label } </ span >
109+ { badge && (
110+ < Badge size = "small" kind = { badge . kind } className = { styles . badge } >
111+ { badge . label }
112+ </ Badge >
113+ ) }
104114 </ SelectPrimitive . ItemText >
105115 </ SelectPrimitive . Item >
106116 ) ) }
@@ -151,6 +161,15 @@ const Select = <T extends string>({
151161 < >
152162 { currentItem . iconImage }
153163 < span > { currentItem . label } </ span >
164+ { currentItem . badge && (
165+ < Badge
166+ size = "small"
167+ kind = { currentItem . badge . kind }
168+ className = { styles . badge }
169+ >
170+ { currentItem . badge . label }
171+ </ Badge >
172+ ) }
154173 </ >
155174 ) }
156175 </ SelectPrimitive . Value >
0 commit comments