text: import React from 'react'
  import { Form, Input, Button, Checkbox } from 'antd'
  import { useHistory } from 'react-router-dom'
  import styles from './index.module.less'
  
  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  }
  const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 16,
    },
  }
  
  const SignIn = () => {
    const onFinish = (values) => {
      console.log('Success:', values)
    }
  
    const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo)
    }
    const history = useHistory()
    const redirectTo = (path) => {
      history.push(path)
    }
  
    return (
      <div className={styles.container}>
        <Form
          {...layout}
          name="basic"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="Username"
            name="username"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>
  
          <Form.Item
            label="Password"
            name="password"
            rules={[
              {
                required: true,
                message: 'Please input your password!',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
  
          <Form.Item {...tailLayout} name="remember" valuePropName="checked">
            <Checkbox>Remember me</Checkbox>
          </Form.Item>
  
          <Form.Item {...tailLayout}>
            {/* <Button type="primary" htmlType="submit"> */}
            <Button type="primary" onClick={() => redirectTo('/')}>
              Sign in
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
  
  export default SignIn
  