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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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>
© 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>
);
}
