user-input.tsx 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. import {
  2. memo,
  3. useState,
  4. } from 'react'
  5. import { useTranslation } from 'react-i18next'
  6. import { RiArrowDownSLine } from '@remixicon/react'
  7. const UserInput = () => {
  8. const { t } = useTranslation()
  9. const [expanded, setExpanded] = useState(true)
  10. const variables: any = []
  11. if (!variables.length)
  12. return null
  13. return (
  14. <div
  15. className={`
  16. rounded-xl border
  17. ${!expanded ? 'bg-indigo-25 border-indigo-100 shadow-none' : 'bg-white shadow-xs border-transparent'}
  18. `}
  19. >
  20. <div
  21. className={`
  22. flex items-center px-2 pt-4 h-[18px] text-[13px] font-semibold cursor-pointer
  23. ${!expanded ? 'text-indigo-800' : 'text-gray-800'}
  24. `}
  25. onClick={() => setExpanded(!expanded)}
  26. >
  27. <RiArrowDownSLine
  28. className={`mr-1 w-3 h-3 ${!expanded ? '-rotate-90 text-indigo-600' : 'text-gray-300'}`}
  29. />
  30. {t('workflow.panel.userInputField').toLocaleUpperCase()}
  31. </div>
  32. <div className='px-2 pt-1 pb-3'>
  33. {
  34. expanded && (
  35. <div className='py-2 text-[13px] text-gray-900'>
  36. {
  37. variables.map((variable: any) => (
  38. <div
  39. key={variable.variable}
  40. className='mb-2 last-of-type:mb-0'
  41. >
  42. </div>
  43. ))
  44. }
  45. </div>
  46. )
  47. }
  48. </div>
  49. </div>
  50. )
  51. }
  52. export default memo(UserInput)