react-icons/fi#FiGlobe JavaScript Examples

The following examples show how to use react-icons/fi#FiGlobe. 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: SettingButton.js    From airdnd-frontend with MIT License 6 votes vote down vote up
SettingButton = ({ isScrollTop, togglePopup }) => {
  return (
    <StSettingButton
      btnType="oval"
      isScrollTop={isScrollTop}
      onClick={togglePopup}
    >
      <FiGlobe style={{ marginRight: '2px' }} />
      <FiChevronDown />
    </StSettingButton>
  );
}
Example #2
Source File: SettingPopup.js    From airdnd-frontend with MIT License 6 votes vote down vote up
SettingPopup = ({ popupVisible, closePopup }) => {
  const popupRef = useRef();
  const handlePopup = ({ target }) => {
    if (popupVisible && !popupRef.current.contains(target)) {
      closePopup();
    }
  };
  useEffect(() => {
    document.addEventListener('click', handlePopup);
    return () => {
      document.removeEventListener('click', handlePopup);
    };
  }, [handlePopup]);

  return (
    <StSettingPopupWrapper ref={popupRef}>
      <StSettingPopup popupState={popupVisible} right="0" padding="1rem 0">
        <StOptionButton border="none">
          <span className="a11yHidden">언어 바꾸기 버튼</span>
          <FiGlobe />
          <StButtonText>한국어(KR)</StButtonText>
        </StOptionButton>
        <StOptionButton border="none">
          <span className="a11yHidden">화폐 바꾸기 버튼</span>
          <FaWonSign />
          <StButtonText>KRW</StButtonText>
        </StOptionButton>
      </StSettingPopup>
    </StSettingPopupWrapper>
  );
}
Example #3
Source File: Clock.jsx    From 4IZ268-2021-2022-ZS with MIT License 6 votes vote down vote up
function Clock({ handleSwitch }) {
  return (
    <div className='group flex items-center'>
      <Tooltip
        content="after:content-['stopwatch']"
        position='left'
        method={() => handleSwitch('Stopwatch')}>
        <FiWatch size='1.5em' />
      </Tooltip>

      <ClockDisplay />

      <Tooltip
        content="after:content-['world_clock']"
        position='right'
        method={() => handleSwitch('Timezones')}>
        <FiGlobe size='1.5em' />
      </Tooltip>
    </div>
  )
}
Example #4
Source File: Recommendations.js    From winstall with GNU General Public License v3.0 5 votes vote down vote up
Recommendations = ({ packs }) => {
  return (
    <div className="homeBlock">
      <div className="box">
        <h2 className="blockHeader">Featured Packs</h2>
        <Link href="/packs">
          <a className="button small">
            <FiPackage />
            View All
          </a>
        </Link>
      </div>
      <h3 className="blockSubtitle">
        Just got a new Windows device? Start with our favourites. Click the +
        sign to include an app on your install script.
      </h3>

      <div className={styles.recommendations}>
        <PackList id="A6JzO22Y1" title="Work From Home" packs={packs}>
          <FiHome />
        </PackList>

        <PackList id="z3zuf1vVD" title="Web Browsers" packs={packs}>
          <FiGlobe />
        </PackList>

        <PackList id="ur23Tk6Sf" title="Essential Tools" packs={packs}>
          <FiStar />
        </PackList>

        <PackList id="qO_m22F6k" title="Entertainment" packs={packs}>
          <FiMusic />
        </PackList>

        <PackList id="Jtght2FO5" title="Gaming" packs={packs}>
          <FiCrosshair />
        </PackList>

        <PackList id="3glB-CGXA" title="Developers" packs={packs}>
          <FiCode />
        </PackList>

        <PackList id="NYWPVq9ct" title="Social Media" packs={packs}>
          <FiUserPlus />
        </PackList>
        
        <PackList id="yphy7XItI" title="School" packs={packs}>
          <FiBookOpen />
        </PackList>
      </div>
    </div>
  );
}
Example #5
Source File: Stopwatch.jsx    From 4IZ268-2021-2022-ZS with MIT License 5 votes vote down vote up
function Stopwatch({ handleSwitch }) {
  const [time, setTime] = useState(0)
  const [isPaused, setIsPaused] = useState(true)

  useEffect(() => {
    let interval = null

    if (!isPaused) {
      interval = setInterval(() => {
        setTime((time) => time + 10)
      }, 10)
    } else {
      clearInterval(interval)
    }
    return () => {
      clearInterval(interval)
    }
  }, [isPaused])

  const handleClick = () => {
    setIsPaused(!isPaused)
  }

  const handleReset = () => {
    setIsPaused(true)
    setTime(0)
  }

  return (
    <div className='group flex items-center'>
      <Tooltip
        content="after:content-['clock']"
        position='left'
        method={() => handleSwitch('Clock')}>
        <FiClock size='1.5em' />
      </Tooltip>

      <div
        className='font-bold text-[12rem] select-none px-4 tabular-nums cursor-pointer'
        onClick={handleClick}
        onDoubleClick={handleReset}>
        {('0' + Math.floor((time / 60000) % 60)).slice(-2)}:
        {('0' + Math.floor((time / 1000) % 60)).slice(-2)}.
        {('0' + ((time / 10) % 100)).slice(-2)}
      </div>

      <Tooltip
        content="after:content-['world_clock']"
        position='right'
        method={() => handleSwitch('Timezones')}>
        <FiGlobe size='1.5em' />
      </Tooltip>
    </div>
  )
}
Example #6
Source File: Footer.js    From airdnd-frontend with MIT License 4 votes vote down vote up
Footer = ({ ...rest }) => {
  return (
    <StFooter {...rest}>
      <StUpperWrapper>
        <StContentSection>
          <StContentTitle>소개</StContentTitle>
          <StContentList>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/d/howairbnbworks"
                target="_blank"
              >
                에어비앤비 이용 방법
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://news.airbnb.com/ko/"
                target="_blank"
              >
                뉴스룸
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnbcitizen.com/?utm_source=airbnb&utm_medium=footer&utm_campaign=product"
                target="_blank"
              >
                Airbnb Citizen
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/plus"
                target="_blank"
              >
                에어비앤비 플러스
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/luxury"
                target="_blank"
              >
                에어비앤비 Luxe
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.hoteltonight.com/?utm_source_name=Airbnb&utm_campaign_name=Dr_Us_Desktop_Airbnb_Footer"
                target="_blank"
              >
                호텔투나잇
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/work?s=footer"
                target="_blank"
              >
                에어비앤비 비즈니스 프로그램
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/d/olympics"
                target="_blank"
              >
                올림픽
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://careers.airbnb.com/"
                target="_blank"
              >
                채용정보
              </StContentItemLink>
            </StContentItem>
          </StContentList>
        </StContentSection>
        <StContentSection>
          <StContentTitle>커뮤니티</StContentTitle>
          <StContentList>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/diversity"
                target="_blank"
              >
                다양성 및 소속감
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/d/accessibility"
                target="_blank"
              >
                접근성
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/magazine"
                target="_blank"
              >
                에어비앤비 매거진
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/associates?from=footer"
                target="_blank"
              >
                에어비앤비 어소시에이트
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/d/covid19relief"
                target="_blank"
              >
                구호 인력을 위한 숙소
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/invite?r=6"
                target="_blank"
              >
                친구 초대하기
              </StContentItemLink>
            </StContentItem>
          </StContentList>
        </StContentSection>
        <StContentSection>
          <StContentTitle>호스팅하기</StContentTitle>
          <StContentList>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/host/homes?from_footer=1"
                target="_blank"
              >
                숙소 호스팅
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/d/onlinehost"
                target="_blank"
              >
                온라인 체험 호스팅
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/host/experiences"
                target="_blank"
              >
                체험 호스팅하기
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/resources/hosting-homes/t/leadership-updates-35"
                target="_blank"
              >
                브라이언 체스키 CEO의 메시지
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/help/article/1387/%ED%95%9C%EA%B5%AD%EC%97%90%EC%84%9C-%EC%B1%85%EC%9E%84%EA%B0%90-%EC%9E%88%EB%8A%94-%ED%98%B8%EC%8A%A4%ED%8C%85-%ED%95%98%EA%B8%B0"
                target="_blank"
              >
                책임감 있는 호스팅
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/openhomes?from_footer=1"
                target="_blank"
              >
                Open Homes
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/resources/hosting-homes"
                target="_blank"
              >
                자료 센터
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://community.withairbnb.com/t5/Community-Center-KR/ct-p/Community-Center-Korean"
                target="_blank"
              >
                커뮤니티 센터
              </StContentItemLink>
            </StContentItem>
          </StContentList>
        </StContentSection>
        <StContentSection>
          <StContentTitle>에어비앤비 지원</StContentTitle>
          <StContentList>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/resources/hosting-homes"
                target="_blank"
              >
                코로나19 관련 업데이트
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/help/home"
                target="_blank"
              >
                도움말 센터
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/help/article/2701/%EC%BD%94%EB%A1%9C%EB%82%98%EB%B0%94%EC%9D%B4%EB%9F%AC%EC%8A%A4%EA%B0%90%EC%97%BC%EC%A6%9D19%EC%BD%94%EB%A1%9C%EB%82%9819-%EA%B4%80%EB%A0%A8-%EC%A0%95%EC%83%81%EC%B0%B8%EC%9E%91%EC%9D%B4-%EA%B0%80%EB%8A%A5%ED%95%9C-%EC%83%81%ED%99%A9-%EC%A0%95%EC%B1%85"
                target="_blank"
              >
                예약 취소 옵션
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/neighbors"
                target="_blank"
              >
                에어비앤비 이웃 민원 지원
              </StContentItemLink>
            </StContentItem>
            <StContentItem>
              <StContentItemLink
                href="https://www.airbnb.co.kr/trust"
                target="_blank"
              >
                신뢰와 안전
              </StContentItemLink>
            </StContentItem>
          </StContentList>
        </StContentSection>
      </StUpperWrapper>
      <StLowerWrapper>
        <StLowerLeftWrapper>
          <StCopyRight>
            &copy; 2020 DEVengersAssemble. All rights reserved
          </StCopyRight>
          <StRuleList>
            <StRuleItem>
              <StRuleLink
                href="https://www.airbnb.co.kr/terms/privacy_policy"
                target="_blank"
              >
                개인정보 처리방침
              </StRuleLink>
            </StRuleItem>
            <StDot aria-hidden="true">・</StDot>
            <StRuleItem>
              <StRuleLink href="https://www.airbnb.co.kr/terms" target="_blank">
                이용약관
              </StRuleLink>
            </StRuleItem>
            <StDot aria-hidden="true">・</StDot>
            <StRuleItem>
              <StRuleLink
                href="https://www.airbnb.co.kr/sitemaps/v2"
                target="_blank"
              >
                사이트맵
              </StRuleLink>
            </StRuleItem>
            <StDot aria-hidden="true">・</StDot>
            <StRuleItem>
              <StRuleLink
                href="https://www.airbnb.co.kr/home/updated_cancellation_policies?korean_strict_policy=true#strict"
                target="_blank"
              >
                한국의 변경된 환불 정책
              </StRuleLink>
            </StRuleItem>
          </StRuleList>
        </StLowerLeftWrapper>
        <StLowerRightWrapper>
          <StSettingButtonWrapper>
            <StSettingButton btnType="underlined">
              <span className="a11yHidden">언어 바꾸기 버튼</span>
              <FiGlobe />
              <StButtonText>한국어(KR)</StButtonText>
            </StSettingButton>
            <StSettingButton btnType="underlined" height="20px" fontSize="14px">
              <span className="a11yHidden">화폐 바꾸기 버튼</span>
              <FaWonSign />
              <StButtonText>KRW</StButtonText>
            </StSettingButton>
          </StSettingButtonWrapper>
          <StSiteLinkList>
            <StSiteLinkItem>
              <StSiteLink
                href="https://www.facebook.com/AirbnbKorea"
                target="_blank"
              >
                <span className="a11yHidden">페이스북으로 이동하기</span>
                <FaFacebookF />
              </StSiteLink>
            </StSiteLinkItem>
            <StSiteLinkItem>
              <StSiteLink href="https://twitter.com/airbnb" target="_blank">
                <span className="a11yHidden">트위터로 이동하기</span>
                <FaTwitter />
              </StSiteLink>
            </StSiteLinkItem>
            <StSiteLinkItem>
              <StSiteLink
                href="https://www.instagram.com/airbnb/"
                target="_blank"
              >
                <span className="a11yHidden">인스타그램으로 이동하기</span>
                <FaInstagram />
              </StSiteLink>
            </StSiteLinkItem>
          </StSiteLinkList>
        </StLowerRightWrapper>
      </StLowerWrapper>
    </StFooter>
  );
}