SecondLevelNav.ResourcePicker.tsx52 lines · main

1	import { cn, Command, CommandGroup, CommandItem, CommandList } from 'ui'
2
3	import type { ResourcePickerRenderProps } from './SecondLevelNav.Layout'
4
5	type NamedResource = { name: string }
6
7	type ResourcePickerListProps = ResourcePickerRenderProps & {
8	items: NamedResource[]
9	emptyMessage: string
10	}
11
12	export const ResourcePickerList = ({
13	items,
14	emptyMessage,
15	selectedResource,
16	onSelect,
17	closePopover,
18	}: ResourcePickerListProps) => {
19	const handleSelect = (value: string) => {
20	onSelect(value)
21	closePopover()
22	}
23
24	return (
25	<Command>
26	<CommandList>
27	<CommandGroup>
28	{items.length === 0 && (
29	<CommandItem disabled className="cursor-default px-4">
30	<p className="text-foreground-light">{emptyMessage}</p>
31	</CommandItem>
32	)}
33	{items.map((item) => {
34	const isActive = item.name === selectedResource
35	return (
36	<CommandItem
37	key={item.name}
38	className={cn(
39	'cursor-pointer px-4',
40	isActive ? 'text-foreground bg-selection' : 'text-foreground-light'
41	)}
42	onSelect={() => handleSelect(item.name)}
43	>
44	<p className="truncate">{item.name}</p>
45	</CommandItem>
46	)
47	})}
48	</CommandGroup>
49	</CommandList>
50	</Command>
51	)
52	}