@ant-design/icons#GithubFilled TypeScript Examples

The following examples show how to use @ant-design/icons#GithubFilled. 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: SocialLogin.tsx From foodie with MIT License

6 votes

SocialLogin: React.FC<{ isLoading: boolean; }> = ({ isLoading }) => {
    const onClickSocialLogin = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
        if (isLoading) e.preventDefault();
    }

    return (
        <div className="w-full flex space-x-2 items-center">
            <a
                className="button w-full bg-blue-500 hover:bg-blue-600"
                href={`${process.env.REACT_APP_FOODIE_URL}/api/v1/auth/facebook`}
                onClick={onClickSocialLogin}
            >
                <FacebookFilled className="m-0 laptop:mr-4 text-xl laptop:text-sm" />
                <span className="hidden laptop:inline-block">Facebook</span>
            </a>
            <a
                className="button w-full text-gray-800 bg-white hover:bg-gray-200 border border-gray-200"
                href={`${process.env.REACT_APP_FOODIE_URL}/api/v1/auth/google`}
                onClick={onClickSocialLogin}
            >
                <GoogleOutlined className="m-0 laptop:mr-4 text-xl laptop:text-sm" />
                <span className="hidden laptop:inline-block">Google</span>
            </a>
            <a
                className="button w-full border border-gray-300 bg-gray-700 hover:bg-gray-600"
                href={`${process.env.REACT_APP_FOODIE_URL}/api/v1/auth/github`}
                onClick={onClickSocialLogin}
            >
                <GithubFilled className="m-0 laptop:mr-4 text-xl laptop:text-sm" />
                <span className="hidden laptop:inline-block">GitHub</span>
            </a>
        </div>
    )
}

Example #2

Source File: List.tsx From dnde with GNU General Public License v3.0

4 votes

List = () => {
  const { data, isLoading, isError, isSuccess } = useGetTemplatesQuery();

  return (
    <Scrollbars autoHide={true} style={{ height: '100%' }}>
      <div className="template">
        <Row align="middle" justify="center" className="header">
          <Col span={24}>
            <Row align="middle" justify="center">
              <Col>
                <span className="title">Dnde</span>
              </Col>
            </Row>
          </Col>
          <Col span={24}>
            <Row align="middle" justify="center">
              <Col style={{ textAlign: 'center' }}>
                <span className="subtitle">
                  Drag and Drop Editor tailored for <b>Mails</b>
                </span>
              </Col>
            </Row>
          </Col>
          <Col style={{ paddingTop: '24px' }} span={24}>
            <Row align="middle" justify="center">
              <Col className="info" md={24} lg={10} style={{ textAlign: 'center' }}>
                <span>
                  All features are optimised for mails, work flexibly through import/export, with responsive design for
                  all devices.
                </span>
                <br />

                <a target="_blank" href="https://github.com/aghontpi/dnde">
                  <span>
                    Check it on Github <GithubFilled style={{ position: 'relative', top: '4px', fontSize: '32px' }} />
                  </span>
                </a>
              </Col>
            </Row>
          </Col>
        </Row>

        <Row className="choose-template" align="middle" gutter={[0, 8]} justify="center">
          <Col span={16}>
            <span className="title">Choose a template and get started.</span>
          </Col>
          <Col span={16}>
            <span className="subtitle">All templates are redesigned in dnde, using original mail as reference.</span>
          </Col>
        </Row>

        <Row justify="center" className="template-list" gutter={[0, 40]}>
          <Col lg={6}>
            <NewItem />
          </Col>
          {isLoading &&
            [1, 2].map((item, key) => {
              return (
                <Col xs={24} md={12} lg={6} style={{ textAlign: 'center' }}>
                  <Preview
                    key={key}
                    id={'8x93dummy'}
                    skeleton={
                      <>
                        <Skeleton active={true} />
                        <Skeleton active={true} />
                      </>
                    }
                  />
                </Col>
              );
            })}
          {isSuccess && data
            ? data.response.map((item, key) => {
                return (
                  <Col lg={6}>
                    <Preview key={key} id={item.docRef} image={item.preview} />
                  </Col>
                );
              })
            : null}
        </Row>
      </div>
    </Scrollbars>
  );
}