QueueNameField.tsx26 lines · main

1	import { UseFormReturn } from 'react-hook-form'
2	import { FormControl, FormField, Input, SheetSection } from 'ui'
3	import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
4
5	import { CreateQueueForm } from './CreateQueueSheet.schema'
6
7	export function QueueNameField({ form }: { form: UseFormReturn<CreateQueueForm> }) {
8	return (
9	<SheetSection>
10	<FormField
11	control={form.control}
12	name="name"
13	render={({ field }) => (
14	<FormItemLayout label="Name" layout="vertical" className="gap-1 relative">
15	<FormControl>
16	<Input {...field} />
17	</FormControl>
18	<span className="text-foreground-lighter text-xs absolute top-0 right-0">
19	Can include letters, numbers, underscores, and hyphens
20	</span>
21	</FormItemLayout>
22	)}
23	/>
24	</SheetSection>
25	)
26	}