SqlSnippetSection.tsx33 lines · main

1	import { UseFormReturn } from 'react-hook-form'
2	import { FormField, SheetSection } from 'ui'
3	import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
4
5	import { CreateCronJobForm } from './CreateCronJobSheet/CreateCronJobSheet.constants'
6	import CodeEditor from '@/components/ui/CodeEditor/CodeEditor'
7
8	interface SqlSnippetSectionProps {
9	form: UseFormReturn<CreateCronJobForm>
10	}
11
12	export const SqlSnippetSection = ({ form }: SqlSnippetSectionProps) => {
13	return (
14	<SheetSection className="px-0! pb-0!">
15	<FormField
16	control={form.control}
17	name="values.snippet"
18	render={({ field }) => (
19	<FormItemLayout label="SQL Snippet" className="[&>div>label]:px-content">
20	<CodeEditor
21	id="create-cron-job-editor"
22	language="pgsql"
23	className="h-72"
24	autofocus={false}
25	value={field.value}
26	onInputChange={field.onChange}
27	/>
28	</FormItemLayout>
29	)}
30	/>
31	</SheetSection>
32	)
33	}