CreateFunctionHeader.tsx37 lines · main

1	import { X } from 'lucide-react'
2	import { cn, SheetClose, SheetHeader, SheetTitle } from 'ui'
3
4	interface CreateFunctionHeaderProps {
5	selectedFunction?: string
6	isDuplicating?: boolean
7	}
8
9	export const CreateFunctionHeader = ({
10	selectedFunction,
11	isDuplicating,
12	}: CreateFunctionHeaderProps) => {
13	return (
14	<SheetHeader className="py-3 flex flex-row justify-between items-center border-b-0">
15	<div className="flex flex-row gap-3 items-center max-w-[75%]">
16	<SheetClose
17	className={cn(
18	'text-muted hover:text ring-offset-background transition-opacity hover:opacity-100',
19	'focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
20	'disabled:pointer-events-none data-[state=open]:bg-secondary',
21	'transition'
22	)}
23	>
24	<X className="h-3 w-3" />
25	<span className="sr-only">Close</span>
26	</SheetClose>
27	<SheetTitle className="truncate">
28	{selectedFunction !== undefined
29	? isDuplicating
30	? `Duplicate function`
31	: `Edit '${selectedFunction}' function`
32	: 'Add a new function'}
33	</SheetTitle>
34	</div>
35	</SheetHeader>
36	)
37	}