53 lines
1.5 KiB
TypeScript

import { RiCloseLine } from '@remixicon/react'
import DialogWrapper from '../dialog-wrapper'
import type { InputVar } from '@/app/components/workflow/types'
import InputFieldForm from './form'
import { convertToInputFieldFormData } from './utils'
type InputFieldEditorProps = {
show: boolean
onClose: () => void
initialData?: InputVar
}
const InputFieldEditor = ({
show,
onClose,
initialData,
}: InputFieldEditorProps) => {
const formData = convertToInputFieldFormData(initialData)
return (
<DialogWrapper
show={show}
onClose={onClose}
panelWrapperClassName='pr-[424px] justify-start'
className='w-[400px] grow-0 rounded-2xl border-[0.5px] bg-components-panel-bg shadow-shadow-shadow-9'
>
<div className='relative flex h-fit flex-col'>
<div className='system-xl-semibold flex items-center pb-1 pl-4 pr-11 pt-3.5 text-text-primary'>
Add Input Field
</div>
<button
type='button'
className='absolute right-2.5 top-2.5 flex size-8 items-center justify-center'
onClick={onClose}
>
<RiCloseLine className='size-4 text-text-tertiary' />
</button>
<InputFieldForm
initialData={formData}
supportFile
onCancel={onClose}
onSubmit={(value) => {
console.log('submit', value)
onClose()
}}
/>
</div>
</DialogWrapper>
)
}
export default InputFieldEditor