ProjectCommandItem.tsx58 lines · main

1	import { Check } from 'lucide-react'
2	import { ReactNode } from 'react'
3	import { cn, CommandItem } from 'ui'
4
5	import type { OrgProject } from '@/data/projects/org-projects-infinite-query'
6
7	export interface ProjectCommandItemProps {
8	project: 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	}
16
17	export function ProjectCommandItem({
18	project,
19	selectedRef,
20	onSelect,
21	onClose,
22	renderRow,
23	checkPosition = 'right',
24	isOptionDisabled,
25	}: ProjectCommandItemProps) {
26	const handleSelect = () => {
27	onSelect?.(project)
28	onClose()
29	}
30
31	const disabled = isOptionDisabled?.(project) ?? false
32
33	return (
34	<CommandItem
35	key={project.ref}
36	value={`${project.name.replaceAll('"', '')}-${project.ref}`}
37	className="cursor-pointer w-full"
38	onSelect={handleSelect}
39	disabled={disabled}
40	>
41	{renderRow ? (
42	renderRow(project)
43	) : (
44	<div
45	className={cn(
46	'w-full flex items-center',
47	checkPosition === 'left' ? 'gap-x-2' : 'justify-between',
48	project.ref !== selectedRef && checkPosition === 'left' && 'ml-6'
49	)}
50	>
51	{checkPosition === 'left' && project.ref === selectedRef && <Check size={16} />}
52	{project.name}
53	{checkPosition === 'right' && project.ref === selectedRef && <Check size={16} />}
54	</div>
55	)}
56	</CommandItem>
57	)
58	}