DashboardToggle.tsx44 lines · main

1	import type { ReactNode } from 'react'
2	import type { FieldValues, Path, UseFormReturn } from 'react-hook-form'
3	import { CardContent, FormControl, FormField, Switch } from 'ui'
4	import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
5
6	interface DashboardToggleProps<T extends FieldValues> {
7	form: UseFormReturn<T>
8	name: Path<T>
9	label: string
10	description: ReactNode
11	onToggle: (value: boolean) => void
12	isLast?: boolean
13	}
14
15	export function DashboardToggle<T extends FieldValues>({
16	form,
17	name,
18	label,
19	description,
20	onToggle,
21	isLast,
22	}: DashboardToggleProps<T>) {
23	return (
24	<CardContent className={isLast ? undefined : 'border-b'}>
25	<FormField
26	control={form.control}
27	name={name}
28	render={({ field }) => (
29	<FormItemLayout layout="flex-row-reverse" label={label} description={description}>
30	<FormControl>
31	<Switch
32	checked={field.value}
33	onCheckedChange={(value) => {
34	field.onChange(value)
35	onToggle(value)
36	}}
37	/>
38	</FormControl>
39	</FormItemLayout>
40	)}
41	/>
42	</CardContent>
43	)
44	}