FunctionEditor.tsx56 lines · main

1	import { Maximize2, Minimize2 } from 'lucide-react'
2	import { Button, cn, FormControl, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
3
4	import CodeEditor from '@/components/ui/CodeEditor/CodeEditor'
5
6	export const FunctionEditor = ({
7	field,
8	language,
9	focused,
10	setFocused,
11	}: {
12	field: any
13	language: string
14	focused: boolean
15	setFocused: (b: boolean) => void
16	}) => {
17	return (
18	<div className={cn('rounded-md relative group grow')}>
19	<FormControl>
20	{language !== undefined && (
21	<CodeEditor
22	id="database-functions-editor"
23	language="pgsql"
24	placeholder={language === 'plpgsql' ? `BEGIN\n\nEND;` : undefined}
25	value={field.value}
26	onInputChange={field.onChange}
27	/>
28	)}
29	</FormControl>
30	<div
31	className={cn(
32	'absolute top-0 right-2 bg-surface-300 border border-strong rounded-sm h-[28px]',
33	'opacity-0 group-hover:opacity-100 group-hover:top-2 transition-all'
34	)}
35	>
36	<Tooltip>
37	<TooltipTrigger asChild>
38	<Button
39	type="text"
40	size="tiny"
41	className={cn(
42	'px-1.5 text-foreground-lighter hover:text-foreground',
43	'transition z-50'
44	)}
45	onClick={() => setFocused(!focused)}
46	icon={focused ? <Minimize2 /> : <Maximize2 />}
47	/>
48	</TooltipTrigger>
49	<TooltipContent side="bottom">
50	{focused ? 'Minimize editor' : 'Maximize editor'}
51	</TooltipContent>
52	</Tooltip>
53	</div>
54	</div>
55	)
56	}