index.tsx48 lines · main

1	import { isEmpty, noop } from 'lodash'
2	import { useState } from 'react'
3	import { Button } from 'ui'
4
5	import { PolicyTemplate } from './PolicyTemplates.constants'
6	import TemplatePreview from './TemplatePreview'
7	import TemplatesList from './TemplatesList'
8
9	interface PolicyTemplatesProps {
10	templates?: PolicyTemplate[]
11	templatesNote?: string
12	onUseTemplate?: (template: PolicyTemplate) => void
13	}
14
15	const PolicyTemplates = ({
16	templates = [],
17	templatesNote = '',
18	onUseTemplate = noop,
19	}: PolicyTemplatesProps) => {
20	const [selectedTemplate, setSelectedTemplate] = useState<PolicyTemplate>(templates[0])
21	return (
22	<div>
23	<div className="flex flex-col md:flex-row justify-between border-t border-default">
24	<TemplatesList
25	templatesNote={templatesNote}
26	templates={templates}
27	selectedTemplate={selectedTemplate}
28	setSelectedTemplate={setSelectedTemplate}
29	/>
30	<TemplatePreview selectedTemplate={selectedTemplate} />
31	</div>
32	<div className="flex w-full items-center justify-end gap-3 border-t px-6 py-4 border-default">
33	<span className="text-sm text-foreground-lighter">
34	This will override any existing code you've written
35	</span>
36	<Button
37	type="primary"
38	disabled={isEmpty(selectedTemplate)}
39	onClick={() => onUseTemplate(selectedTemplate)}
40	>
41	Use this template
42	</Button>
43	</div>
44	</div>
45	)
46	}
47
48	export default PolicyTemplates