ohmyform-ui/components/form/admin/end.page.tab.tsx

import {DeleteOutlined, PlusOutlined} from '@ant-design/icons/lib'
import {Button, Card, Form, Input, Switch, 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 EndPageTab: React.FC<TabPaneProps> = props => {
  const { t } = useTranslation()

  return (
    <Tabs.TabPane {...props}>
      <Form.Item
        label={t('form:endPage.show')}
        name={['form', 'endPage', 'show']}
        valuePropName={'checked'}
      >
        <Switch />
      </Form.Item>

      <Form.Item
        label={t('form:endPage.title')}
        name={['form', 'endPage', 'title']}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label={t('form:endPage.paragraph')}
        name={['form', 'endPage', 'paragraph']}
      >
        <Input.TextArea autoSize />
      </Form.Item>

      <Form.Item
        label={t('form:endPage.continueButtonText')}
        name={['form', 'endPage', 'buttonText']}
      >
        <Input />
      </Form.Item>

      <Form.List
        name={['form', 'endPage', 'buttons']}
      >
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map((field, index) => (
                  <Form.Item
                    wrapperCol={{
                      sm: { offset: index === 0 ? 0 : 6 },
                    }}
                    label={index === 0 ? t('form:endPage.buttons') : ''}
                    key={field.key}
                  >
                    <Card
                      actions={[
                        <DeleteOutlined key={'delete'} onClick={() => remove(index)} />
                      ]}
                    >
                      <Form.Item
                        label={t('form:endPage.url')}
                        name={[field.key, 'url']}
                        rules={[
                          {type: 'url', message: t('validation:invalidUrl')}
                        ]}
                        labelCol={{ span: 6 }}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item label={t('form:endPage.action')} name={[field.key, 'action']} labelCol={{ span: 6 }}>
                        <Input />
                      </Form.Item>
                      <Form.Item label={t('form:endPage.text')} name={[field.key, 'text']} labelCol={{ span: 6 }}>
                        <Input />
                      </Form.Item>
                      <Form.Item label={t('form:endPage.bgColor')} name={[field.key, 'bgColor']} labelCol={{ span: 6 }}>
                        <InputColor />
                      </Form.Item>
                      <Form.Item label={t('form:endPage.activeColor')} name={[field.key, 'activeColor']} labelCol={{ span: 6 }}>
                        <InputColor />
                      </Form.Item>
                      <Form.Item label={t('form:endPage.color')} name={[field.key, 'color']} labelCol={{ span: 6 }}>
                        <InputColor />
                      </Form.Item>
                    </Card>
                  </Form.Item>
                )
              )}
              <Form.Item
                wrapperCol={{
                  sm: { offset: 6 },
                }}
              >
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  style={{ width: '60%' }}
                >
                  <PlusOutlined /> {t('form:endPage.addButton')}
                </Button>
              </Form.Item>
            </div>
          )
        }}
      </Form.List>
    </Tabs.TabPane>
  )
}