1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- import {
- memo,
- useState,
- } from 'react'
- import { useTranslation } from 'react-i18next'
- import { RiArrowDownSLine } from '@remixicon/react'
- const UserInput = () => {
- const { t } = useTranslation()
- const [expanded, setExpanded] = useState(true)
- const variables: any = []
- if (!variables.length)
- return null
- return (
- <div
- className={`
- rounded-xl border
- ${!expanded ? 'bg-indigo-25 border-indigo-100 shadow-none' : 'bg-white shadow-xs border-transparent'}
- `}
- >
- <div
- className={`
- flex items-center px-2 pt-4 h-[18px] text-[13px] font-semibold cursor-pointer
- ${!expanded ? 'text-indigo-800' : 'text-gray-800'}
- `}
- onClick={() => setExpanded(!expanded)}
- >
- <RiArrowDownSLine
- className={`mr-1 w-3 h-3 ${!expanded ? '-rotate-90 text-indigo-600' : 'text-gray-300'}`}
- />
- {t('workflow.panel.userInputField').toLocaleUpperCase()}
- </div>
- <div className='px-2 pt-1 pb-3'>
- {
- expanded && (
- <div className='py-2 text-[13px] text-gray-900'>
- {
- variables.map((variable: any) => (
- <div
- key={variable.variable}
- className='mb-2 last-of-type:mb-0'
- >
- </div>
- ))
- }
- </div>
- )
- }
- </div>
- </div>
- )
- }
- export default memo(UserInput)
|