@ant-design/icons#CompassTwoTone TypeScript Examples

The following examples show how to use @ant-design/icons#CompassTwoTone. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: App.tsx From pcap2socks-gui with MIT License

5 votes

renderProxy = () => {
    return (
      <div className="content-content">
        <Row className="content-content-row" gutter={[16, 16]} justify="center">
          <Col className="content-content-col" span={24}>
            <CompassTwoTone className="content-content-icon" />
          </Col>
        </Row>
        <Row className="content-content-row" gutter={[16, 32]} justify="center">
          <Col className="content-content-col" span={24}>
            <Paragraph>
              <Title level={3}>代理服务器</Title>
              <Paragraph type="secondary" style={{ marginBottom: "0" }}>
                源设备被转发到代理服务器的网络流量将用于维系源设备与目的设备间的网络联系。
              </Paragraph>
              <Paragraph type="secondary">如果你有一份来自他人的代理配置文件，你可以导入该代理配置。</Paragraph>
            </Paragraph>
          </Col>
        </Row>
        <Row className="content-content-row" gutter={[16, 0]} justify="center">
          <Col className="content-content-col" xs={24} sm={18} md={12}>
            <RowSelect
              label="协议"
              options={protocols}
              value={this.state.protocol}
              onChange={(value) => this.setState({ protocol: Number(value) })}
            />
            <RowInput
              label="服务器地址"
              value={this.state.destination}
              onChange={(value) => {
                this.setState({ destination: value });
              }}
            />
            {(() => {
              if (this.state.protocol === 0) {
                return (
                  <div>
                    <RowSwitch
                      label="认证"
                      value={this.state.authentication}
                      onChange={(value) => this.setState({ authentication: value })}
                    />
                    {(() => {
                      if (this.state.authentication) {
                        return (
                          <div>
                            <RowInput
                              label="用户名"
                              value={this.state.username}
                              onChange={(value) => {
                                this.setState({ username: value });
                              }}
                            />
                            <RowInput
                              label="密码"
                              password
                              value={this.state.password}
                              onChange={(value) => {
                                this.setState({ password: value });
                              }}
                            />
                          </div>
                        );
                      }
                    })()}
                  </div>
                );
              }
            })()}
          </Col>
        </Row>
        <Row gutter={[16, 16]} justify="center"></Row>
      </div>
    );
  };