EmbeddedProjectList.tsx52 lines · main

1	import type { ReactNode } from 'react'
2	import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
3
4	import { ProjectCommandItem } from './ProjectCommandItem'
5	import type { OrgProject } from '@/data/projects/org-projects-infinite-query'
6
7	export interface EmbeddedProjectListProps {
8	projects: OrgProject[]
9	selectedRef: string | undefined
10	onSelect?: (project: OrgProject) => void
11	onClose: () => void
12	renderRow?: (project: OrgProject) => ReactNode
13	checkPosition?: 'right' | 'left'
14	isOptionDisabled?: (project: OrgProject) => boolean
15	sentinelRef: (node: Element | null) => void
16	hasNextPage: boolean
17	}
18
19	export function EmbeddedProjectList({
20	projects,
21	selectedRef,
22	onSelect,
23	onClose,
24	renderRow,
25	checkPosition,
26	isOptionDisabled,
27	sentinelRef,
28	hasNextPage,
29	}: EmbeddedProjectListProps) {
30	return (
31	<div className="min-h-0 p-1">
32	{projects.map((project) => (
33	<ProjectCommandItem
34	key={project.ref}
35	project={project}
36	selectedRef={selectedRef}
37	onSelect={onSelect}
38	onClose={onClose}
39	renderRow={renderRow}
40	checkPosition={checkPosition}
41	isOptionDisabled={isOptionDisabled}
42	/>
43	))}
44	<div ref={sentinelRef} className="h-1 -mt-1" />
45	{hasNextPage && (
46	<div className="px-2 py-1">
47	<ShimmeringLoader className="py-2" />
48	</div>
49	)}
50	</div>
51	)
52	}