TemplatesList.tsx54 lines · main

1	import { noop } from 'lodash'
2	import { Menu } from 'ui'
3
4	import { PolicyTemplate } from './PolicyTemplates.constants'
5
6	interface TemplatesListProps {
7	templates: PolicyTemplate[]
8	templatesNote: string
9	selectedTemplate: PolicyTemplate
10	setSelectedTemplate: (template: PolicyTemplate) => void
11	}
12
13	const TemplatesList = ({
14	templates = [],
15	templatesNote = '',
16	selectedTemplate,
17	setSelectedTemplate = noop,
18	}: TemplatesListProps) => (
19	<div className="flex flex-col justify-between border-r border-default w-full">
20	<div
21	className="hide-scrollbar divide-border-primary space-y-0 divide-y divide-solid overflow-y-auto"
22	style={{ maxHeight: '24rem' }}
23	>
24	<Menu type="border">
25	{templates.map((template, i) => {
26	const active = selectedTemplate?.id === template?.id
27	return (
28	<div
29	key={i}
30	className={
31	'border-b border-overlay hover:bg-surface-200 ' + (active ? 'bg-surface-300' : '')
32	}
33	>
34	<Menu.Item
35	key={template.id}
36	active={active}
37	onClick={() => setSelectedTemplate(template)}
38	>
39	<div className="truncate py-2">{template.templateName}</div>
40	</Menu.Item>
41	</div>
42	)
43	})}
44	</Menu>
45	</div>
46	{templatesNote && (
47	<div className="px-4 py-2">
48	<p className="text-xs text-foreground-lighter">{templatesNote}</p>
49	</div>
50	)}
51	</div>
52	)
53
54	export default TemplatesList