48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import classNames from 'classnames'
|
|
import { FormItem } from '@/components/ui/Form'
|
|
import type { PropsWithChildren } from 'react'
|
|
import type { FormikTouched, FormikErrors } from 'formik'
|
|
|
|
type FormRowProps<T> = PropsWithChildren<{
|
|
label: string
|
|
errors: FormikErrors<T>
|
|
touched: FormikTouched<T>
|
|
name: keyof T
|
|
border?: boolean
|
|
alignCenter?: boolean
|
|
}>
|
|
|
|
const FormRow = <T extends Record<string, unknown>>(props: FormRowProps<T>) => {
|
|
const {
|
|
label,
|
|
children,
|
|
errors,
|
|
touched,
|
|
name,
|
|
border = true,
|
|
alignCenter = true,
|
|
} = props
|
|
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
'grid md:grid-cols-3 gap-4 py-8',
|
|
border && 'border-b border-gray-200 dark:border-gray-600',
|
|
alignCenter && 'items-center'
|
|
)}
|
|
>
|
|
<div className="font-semibold">{label}</div>
|
|
<div className="col-span-2">
|
|
<FormItem
|
|
className="mb-0 max-w-[700px]"
|
|
invalid={(errors[name] && touched[name]) as boolean}
|
|
errorMessage={errors[name] as string}
|
|
>
|
|
{children}
|
|
</FormItem>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FormRow
|