BranchLink.tsx44 lines · main

1	import { Check, Shield } from 'lucide-react'
2	import Link from 'next/link'
3	import { useRouter } from 'next/router'
4	import { CommandItem } from 'ui'
5
6	import { sanitizeRoute } from './ProjectDropdown.utils'
7	import type { Branch } from '@/data/branches/branches-query'
8	import { useTrack } from '@/lib/telemetry/track'
9
10	export interface BranchLinkProps {
11	branch: Branch
12	isSelected: boolean
13	onClose: () => void
14	}
15
16	export function BranchLink({ branch, isSelected, onClose }: BranchLinkProps) {
17	const track = useTrack()
18	const router = useRouter()
19	const sanitizedRoute = sanitizeRoute(router.route, router.query)
20	const href =
21	sanitizedRoute?.replace('[ref]', branch.project_ref) ?? `/project/${branch.project_ref}`
22
23	return (
24	<Link passHref href={href}>
25	<CommandItem
26	value={branch.name.replaceAll('"', '')}
27	className="cursor-pointer w-full flex items-center justify-between text-sm md:text-xs p-2 md:py-1.5 md:px-2"
28	onSelect={() => {
29	track('branch_selector_branch_clicked', {
30	branchId: branch.id,
31	branchName: branch.name,
32	})
33	onClose()
34	}}
35	>
36	<p className="truncate w-60 flex items-center gap-1" title={branch.name}>
37	{branch.is_default && <Shield size={14} className="text-amber-900" />}
38	{branch.name}
39	</p>
40	{isSelected && <Check size={14} strokeWidth={1.5} />}
41	</CommandItem>
42	</Link>
43	)
44	}