TemplatePreview.tsx36 lines · main

1	import { isEmpty } from 'lodash'
2
3	import { PolicyTemplate } from './PolicyTemplates.constants'
4	import SqlEditor from '@/components/ui/SqlEditor'
5
6	interface TemplatePreviewProps {
7	selectedTemplate: PolicyTemplate
8	}
9
10	const TemplatePreview = ({ selectedTemplate }: TemplatePreviewProps) => {
11	const { id, templateName, description, statement } = selectedTemplate
12	return (
13	<div className="space-y-8 md:w-[70%]">
14	{!isEmpty(selectedTemplate) && (
15	<div className="flex h-full flex-col justify-between">
16	<div className="my-5 h-full space-y-6 px-6">
17	<div className="space-y-2">
18	<div className="flex flex-col space-y-2">
19	<h3>{templateName}</h3>
20	<p className="text-foreground-light text-sm">{description}</p>
21	</div>
22	</div>
23	<div className="space-y-2">
24	<label className="text-foreground-light text-sm">Policy SQL template:</label>
25	<div className="h-64">
26	<SqlEditor readOnly queryId={id} defaultValue={statement} />
27	</div>
28	</div>
29	</div>
30	</div>
31	)}
32	</div>
33	)
34	}
35
36	export default TemplatePreview