ProjectBranchSelectorSheetTabTrigger.tsx55 lines · main

1	import type { LucideIcon } from 'lucide-react'
2	import { cn, TabsTrigger_Shadcn_ } from 'ui'
3
4	export interface ProjectBranchSelectorSheetTabTriggerProps {
5	value: 'organization' | 'project' | 'branch'
6	label: string
7	icon: LucideIcon
8	isMainBranch?: boolean
9	isLast: boolean
10	}
11
12	export function ProjectBranchSelectorSheetTabTrigger({
13	value,
14	label,
15	icon: Icon,
16	isMainBranch = false,
17	isLast,
18	}: ProjectBranchSelectorSheetTabTriggerProps) {
19	const isBranch = value === 'branch'
20	const isProductionBranch = isBranch && isMainBranch
21
22	return (
23	<TabsTrigger_Shadcn_
24	value={value}
25	className={cn(
26	'group relative text-xs flex flex-col items-center gap-1.5 px-4 py-3 data-[state=active]:bg-surface-200 data-[state=active]:border-foreground-light border-b duration-0',
27	isProductionBranch &&
28	'text-warning data-[state=active]:text-warning hover:text-warning hover:opacity-70'
29	)}
30	>
31	<Icon className="shrink-0" size={16} strokeWidth={1.5} />
32	<span className="truncate max-w-full text-xs leading-tight" title={label}>
33	{label}
34	</span>
35
36	{!isLast && (
37	<svg
38	aria-hidden="true"
39	width="100%"
40	height="100%"
41	viewBox="0 0 6 63"
42	fill="none"
43	xmlns="http://www.w3.org/2000/svg"
44	className="absolute duration-0 bottom-0 top-0 -right-2 w-3 h-full z-10"
45	>
46	<path
47	d="M5.49365 31L0.493652 0V62L5.49365 31Z"
48	className="fill-[hsl(var(--background-dash-sidebar))] group-data-[state=active]:fill-[hsl(var(--background-surface-200))]"
49	/>
50	<path d="M0.493652 0L5.49365 31L0.493652 62" stroke="hsl(var(--border-default))" />
51	</svg>
52	)}
53	</TabsTrigger_Shadcn_>
54	)
55	}