PolicyName.tsx34 lines · main

1	import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from 'ui'
2
3	interface PolicyNameProps {
4	name: string
5	limit?: number
6	onUpdatePolicyName: (name: string) => void
7	}
8
9	export const PolicyName = ({ name = '', limit = 100, onUpdatePolicyName }: PolicyNameProps) => {
10	return (
11	<div className="flex flex-col md:flex-row gap-4 md:gap-12">
12	<div className="flex md:w-1/3 flex-col space-y-2">
13	<label className="text-base text-foreground-light" htmlFor="policy-name">
14	Policy name
15	</label>
16	<p className="text-sm text-foreground-lighter">A descriptive name for your policy</p>
17	</div>
18	<div className="relative md:w-2/3">
19	<InputGroup>
20	<InputGroupInput
21	id="policy-name"
22	value={name}
23	onChange={(e) => onUpdatePolicyName(e.target.value)}
24	/>
25	<InputGroupAddon align="inline-end">
26	<InputGroupText>
27	{name.length}/{limit}
28	</InputGroupText>
29	</InputGroupAddon>
30	</InputGroup>
31	</div>
32	</div>
33	)
34	}