@ant-design/icons#TwitterOutlined JavaScript Examples

storiesOf('antd/tag', module).add('icon', () => 
  <>
    <Tag icon={<TwitterOutlined />} color="#55acee">
      Twitter
    </Tag>
    <Tag icon={<YoutubeOutlined />} color="#cd201f">
      Youtube
    </Tag>
    <Tag icon={<FacebookOutlined />} color="#3b5999">
      Facebook
    </Tag>
    <Tag icon={<LinkedinOutlined />} color="#55acee">
      LinkedIn
    </Tag>
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p><code>Tag</code> components can contain an <code>Icon</code>. This is done by setting the <code>icon</code> property or placing an <code>Icon</code> component within the <code>Tag</code>.</p>
<p>If you want specific control over the positioning and placement of the <code>Icon</code>, then that should be done by placing the <code>Icon</code> component within the <code>Tag</code> rather than using the <code>icon</code> property.</p></>) } });

export default function Nav(props) {
  return (
    <Space
      align="center"
      size="large"
      style={{ width: "100%", justifyContent: "center" }}
    >
      <a
        href="https://network-rc.esonwong.com"
        target="_blank"
        rel="noopener noreferrer"
      >
        <HomeOutlined /> Network RC
      </a>
      <a
        href="https://twitter.com/eson000"
        target="_blank"
        rel="noopener noreferrer"
      >
        <TwitterOutlined /> Twitter
      </a>
      <a
        href="https://space.bilibili.com/96740361"
        target="_blank"
        rel="noopener noreferrer"
      >
        <Icon type="icon-bilibili-fill" /> B站
      </a>
      <a
        href="https://www.youtube.com/channel/UCyQR6LHhhhpTFfxZo7VZddA"
        target="_blank"
        rel="noopener noreferrer"
      >
        <YoutubeOutlined /> Youtube
      </a>
      <a
        href="https://github.com/itiwll/network-rc"
        target="_blank"
        rel="noopener noreferrer"
      >
        <GithubOutlined /> Github
      </a>
      <a
        href="https://blog.esonwong.com/donate/"
        target="_blank"
        rel="noopener noreferrer"
      >
        <HeartOutlined /> 请我喝杯咖啡吧！
      </a>
    </Space>
  );
}

Estado = regionWithStyle(({ uf, className }) => {
  const dispatch = useDispatch();
  const sectors = useSelector(getSectors);
  const events = useSelector(getEvents);
  const lastCheck = useSelector(getLastCheck);
  const loading = useSelector(createLoadingSelector([LOAD_SECTORS]));
  const selectedSectors = useSelector(getSelectedSectors);
  const regionInfo = useSelector(getRegions(uf));

  const [categoryFilter, setCategoryFilter] = useState(false);
  const currRegion =
    uf && regions.filter(item => item.initial === uf.toUpperCase())[0];

  const handleCategorySearch = ev => {
    const { value } = ev.target;
    setCategoryFilter(value);
  };

  useEffect(() => {
    ReactGA.initialize(process.env.NEXT_PUBLIC_GA_KEY);
    ReactGA.pageview(document.location.pathname);

    dispatch(loadRegions(uf));
    dispatch(
      loadSectors({
        ordering: 'events_count',
        region__initial: currRegion.initial,
        limit: 100
      })
    );

    return function cleanup() {
      dispatch(resetState());
    };
  }, [uf]);

  useEffect(() => {
    if (!sectors.length) return;

    if (!lastCheck) {
      for (let sectorId of Object.keys(selectedSectors).filter(
        key => !!selectedSectors[key]
      )) {
        dispatch(loadEvents(sectorId, currRegion?.initial));
      }
    }

    if (selectedSectors[lastCheck])
      dispatch(loadEvents(lastCheck, currRegion?.initial));
  }, [selectedSectors]);

  const categories = categoryFilter
    ? sectors.filter(item => {
        return normalizeSearch(item.name).includes(
          normalizeSearch(categoryFilter)
        );
      })
    : sectors;

  const categoriesList = categories.filter(item => selectedSectors[item.id]);

  // doesnt reverse array if the
  // category wasnt checked from the ui
  const checkedFromUi = useMemo(() => {
    return !!lastCheck;
  }, [selectedSectors]);
  const filteredCategories = checkedFromUi
    ? categoriesList.reverse()
    : categoriesList;

  const handleSectorCheck = sectorId => ev => {
    dispatch(selectSector(sectorId));
  };

  return (
    <div className={'estado-page ' + className}>
      <Reset />
      <Head>
        <HeadTags region={currRegion} />
        <title>
          Corona Brasil - {currRegion?.name} - Saiba o que está funcionando em
          sua cidade e estado
        </title>
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <RegionProvider region={currRegion}>
        <Header />
        <div className='alert'>
          Você tem alguma informação sobre sua cidade/estado?{' '}
          <a href={EVENTS_FORM} target='__blank'>
            Ajude no combate à pandemia clicando aqui
          </a>
          !
        </div>

        <RegionOverview />

        <article className='description'>
          <div className='title-container'>
            <Title.h1>
              Acontecimentos - {currRegion?.name}
              <Dot type='dark' />
            </Title.h1>
            <SocialSharing message={sharing.whatsapp(currRegion?.name)} />
          </div>

          <div className='contact'>
            {regionInfo?.phone && (
              <div className='phone'>
                <span className='label'>Ouvidoria: </span>
                <a href={`tel:+55${regionInfo?.phone}`}>{regionInfo?.phone}</a>
              </div>
            )}
            <div className='social'>
              {regionInfo?.twitter && (
                <a target='__blank' href={regionInfo?.twitter}>
                  <TwitterOutlined />
                </a>
              )}
              {regionInfo?.instagram && (
                <a target='__blank' href={regionInfo?.instagram}>
                  <InstagramOutlined />
                </a>
              )}
              {regionInfo?.official_site && (
                <a target='__blank' href={regionInfo?.official_site}>
                  <GlobalOutlined />
                </a>
              )}
            </div>
          </div>
          <Text>
            O funcionamento de transportes públicos, bares, restaurantes,
            mercados, farmácias, padarias e outros estabelecimentos está mudando
            a cada semana, em cada estado ou cidade.
            <br /> Confira o que está funcionando no Brasil, até quando e por
            quê.
          </Text>
        </article>

        <section className='events'>
          <div className='events__menu'>
            <List
              header={
                <>
                  <div className='header'>
                    <h2>Categorias</h2>{' '}
                  </div>
                  <div className='search'>
                    <Input
                      prefix={<SearchOutlined />}
                      placeholder='Buscar categoria'
                      onChange={handleCategorySearch}
                    />
                  </div>
                </>
              }
              bordered
              loading={
                loading?.[LOAD_SECTORS]?.phase === 'LOADING' || !sectors.length
              }
            >
              <div className='list-container'>
                {categories.map(item => (
                  <List.Item key={JSON.stringify(item)}>
                    <Checkbox
                      checked={!!selectedSectors?.[item.id]}
                      onChange={handleSectorCheck(item.id)}
                    />
                    <SectorIcon sector={item.id} />

                    <span className='name'>{item.name}</span>
                    <Badge count={item.events_count} />
                  </List.Item>
                ))}
              </div>
            </List>
          </div>
          <div className='events__group'>
            {!filteredCategories.length && (
              <Empty description='Selecione uma categoria.' />
            )}
            {filteredCategories.map(item => (
              <Event
                key={JSON.stringify(item)}
                sector={item.id}
                title={item.name}
              >
                {events?.[item.id] && !events?.[item.id].results.length && (
                  <Empty
                    image={
                      <img width={150} src='/static/icons/loudspeaker.svg' />
                    }
                    description={
                      <div>
                        <p>
                          Ooops, nenhuma informação sobre{' '}
                          <strong>{item.name}</strong> encontrada :/
                        </p>{' '}
                        <a target='__blank' href={EVENTS_FORM}>
                          Você tem alguma informação? Ajude no combate à
                          pandemia clicando aqui!
                        </a>
                      </div>
                    }
                  />
                )}

                {events?.[item.id] &&
                  events?.[item.id].results.map(item => (
                    <Event.Item
                      key={JSON.stringify(item)}
                      event={item}
                      city={item?.city?.name}
                      status={item.status_type}
                      title={item.name}
                      description={item?.text || item?.source?.text}
                    ></Event.Item>
                  ))}
              </Event>
            ))}
          </div>
        </section>
      </RegionProvider>
      <Footer />
    </div>
  );
})