ProjectBranchSelectorTrigger.tsx63 lines · main

1	import { ChevronsUpDown, GitBranch } from 'lucide-react'
2	import { forwardRef } from 'react'
3	import { cn, SidebarMenuButton } from 'ui'
4
5	export interface ProjectBranchSelectorTriggerProps {
6	displayProjectName: string
7	selectedOrgInitial: string
8	isBranch: boolean
9	isProductionBranch: boolean
10	branchDisplayName: string
11	onGoToOrganization: () => void
12	onClick?: () => void
13	}
14
15	export const ProjectBranchSelectorTrigger = forwardRef<
16	HTMLButtonElement,
17	ProjectBranchSelectorTriggerProps
18	>(
19	(
20	{
21	displayProjectName,
22	selectedOrgInitial,
23	isBranch,
24	branchDisplayName,
25	onClick,
26	}: ProjectBranchSelectorTriggerProps,
27	ref
28	) => {
29	return (
30	<SidebarMenuButton
31	size="lg"
32	className="group py-1 gap-1.5 w-full flex h-auto text-left data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground touch-manipulation gap-x-3"
33	onClick={onClick}
34	ref={ref}
35	>
36	<div className="relative flex h-8 aspect-square shrink-0 items-center bg-background-muted group-hover:border-stronger justify-center rounded-sm border border-strong text-xs">
37	{selectedOrgInitial}
38	</div>
39	<div className="text-left grow min-w-0">
40	<div className="w-full truncate text-foreground leading-tight max-w-[250px]">
41	{displayProjectName}
42	</div>
43	<div
44	className={cn(
45	'flex items-center gap-0.5',
46	isBranch ? 'text-foreground-lighter' : 'text-warning'
47	)}
48	>
49	<GitBranch className="shrink-0 size-3" strokeWidth={1.5} />
50	<span className="truncate min-w-0 leading-tight text-xs">{branchDisplayName}</span>
51	</div>
52	</div>
53
54	<ChevronsUpDown
55	strokeWidth={1.5}
56	className="ml-auto text-foreground-lighter w-4! h-4! md:hidden md:group-hover:flex"
57	/>
58	</SidebarMenuButton>
59	)
60	}
61	)
62
63	ProjectBranchSelectorTrigger.displayName = 'ProjectBranchSelectorTrigger'