PolicyAllowedOperation.tsx40 lines · main

1	import { noop } from 'lodash'
2	import { RadioGroupCard, RadioGroupCardItem } from 'ui'
3
4	interface PolicyAllowedOperationProps {
5	operation: string
6	onSelectOperation: (operation: string) => void
7	}
8
9	const PolicyAllowedOperation = ({
10	operation = '',
11	onSelectOperation = noop,
12	}: PolicyAllowedOperationProps) => {
13	return (
14	<div className="flex justify-between space-x-12">
15	<div className="flex w-1/3 flex-col space-y-2">
16	<label className="text-base text-foreground-light" htmlFor="allowed-operation">
17	Allowed operation
18	</label>
19	<p className="text-sm text-foreground-lighter">Select an operation for this policy</p>
20	</div>
21	<div className="w-2/3">
22	<div className="flex items-center space-x-8">
23	<RadioGroupCard
24	id="allowed-operation"
25	name="allowed-operation"
26	className="flex flex-wrap gap-3"
27	value={operation}
28	onValueChange={(value) => onSelectOperation(value)}
29	>
30	{['SELECT', 'INSERT', 'UPDATE', 'DELETE', 'ALL'].map((op) => (
31	<RadioGroupCardItem key={op} value={op} id={`r${op}`} label={op} className="w-24" />
32	))}
33	</RadioGroupCard>
34	</div>
35	</div>
36	</div>
37	)
38	}
39
40	export default PolicyAllowedOperation