ProjectRowLink.tsx52 lines · main

1	import { ParsedUrlQuery } from 'querystring'
2	import { Check } from 'lucide-react'
3	import Link from 'next/link'
4	import { Badge, cn } from 'ui'
5
6	import { sanitizeRoute } from './ProjectDropdown.utils'
7	import PartnerIcon from '@/components/ui/PartnerIcon'
8	import { getManagedByFromOrganizationPartner } from '@/data/organizations/managed-by-utils'
9
10	export interface ProjectRowLinkProps {
11	project: {
12	ref: string
13	name: string
14	status?: string
15	integration_source?: string | null
16	}
17	selectedRef: string | undefined
18	route: string
19	routerQueries: ParsedUrlQuery
20	}
21
22	export function ProjectRowLink({
23	project,
24	selectedRef,
25	route,
26	routerQueries,
27	}: ProjectRowLinkProps) {
28	const sanitizedRoute = sanitizeRoute(route, routerQueries)
29	const href = sanitizedRoute?.replace('[ref]', project.ref) ?? `/project/${project.ref}`
30	const isSelected = project.ref === selectedRef
31	const isPaused = project.status === 'INACTIVE'
32	const managedBy = getManagedByFromOrganizationPartner(undefined, project.integration_source)
33
34	return (
35	<Link
36	href={href}
37	className="w-full flex items-center justify-between p-0.5 md:p-0 text-sm md:text-xs"
38	>
39	<span
40	className={cn(
41	'flex items-center gap-2 min-w-0',
42	isSelected ? 'md:max-w-60' : 'md:max-w-64'
43	)}
44	>
45	<span className="truncate">{project.name}</span>
46	{isPaused && <Badge className="ml-2">Paused</Badge>}
47	<PartnerIcon organization={{ managed_by: managedBy }} />
48	</span>
49	{isSelected && <Check size={16} />}
50	</Link>
51	)
52	}