ohmyform-ui/components/form/admin/design.tab.tsx

import { Form, Input, Tabs } from 'antd'
import { TabPaneProps } from 'antd/lib/tabs'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { InputColor } from '../../input/color'

export const DesignTab: React.FC<TabPaneProps> = (props) => {
  const { t } = useTranslation()

  return (
    <Tabs.TabPane {...props}>
      <Form.Item label={t('form:design.font')} name={['form', 'design', 'font']}>
        <Input />
      </Form.Item>

      {[
        'backgroundColor',
        'questionColor',
        'answerColor',
        'buttonColor',
        'buttonActiveColor',
        'buttonTextColor',
      ].map((name) => (
        <Form.Item
          key={name}
          label={t(`form:design.${name}`)}
          name={['form', 'design', 'colors', name]}
        >
          <InputColor />
        </Form.Item>
      ))}
    </Tabs.TabPane>
  )
}