react-icons/md#MdKeyboardArrowRight JavaScript Examples
The following examples show how to use
react-icons/md#MdKeyboardArrowRight.
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: MsgDetailHostInfoPageLinkBox.js From airdnd-frontend with MIT License | 6 votes |
|
MsgDetailHostInfoPageLinkBox = ({ hostname, hostProfileImg }) => {
return (
<MsgDetailHpLinkWrapper>
<MsgDetailHpLinkOuterWrapper>
<MsgDetailHpLinkInnerWrapper>
<MsgDetailHpLinkTitleWrapper>
<MsgDetailHpLinkTitle>호스트 {hostname}님</MsgDetailHpLinkTitle>
<StLink to="/users/show/hostId" target="_blank">
프로필 보기
</StLink>
</MsgDetailHpLinkTitleWrapper>
<MsgDetailHpLinkProfileWrapper>
<Profile lastName="김" profileImg={hostProfileImg} />
</MsgDetailHpLinkProfileWrapper>
</MsgDetailHpLinkInnerWrapper>
<a href="tel:+8210-6415-4738">
<StButton>
<MsgDetailHpLinkButtonWrapper>
<MsgDetailHpLinkButtonInnerWrapper>
<MdPhoneIphone />
<MsgDetailHpLinkButtonText>
호스트에게 전화하기
</MsgDetailHpLinkButtonText>
</MsgDetailHpLinkButtonInnerWrapper>
<MdKeyboardArrowRight />
</MsgDetailHpLinkButtonWrapper>
</StButton>
</a>
</MsgDetailHpLinkOuterWrapper>
</MsgDetailHpLinkWrapper>
);
}
Example #2
| Source File: MsgDetailReservedHomeLinkBox.js From airdnd-frontend with MIT License | 6 votes |
|
MsgDetailReservedHomeLinkBox = ({ rules, homeId }) => {
return (
<MsgDetailRhLbWrapper>
<MsgDetailRhLbOuterWrapper>
<MsgDetailRhLbInnerWrapper>
<MsgDetailRhLbTitle rules={rules}>숙소</MsgDetailRhLbTitle>
{rules && rules.length !== 0 && (
<MsgDetailRhLbAddrestWrapper>
<MsgDetailRhLbRulesTitle>숙소 이용규칙</MsgDetailRhLbRulesTitle>
<MsgDetailRhLbRulesWrapper>
{rules.map((rule, i) => (
<MsgDetailRhLbRulesItem key={i} rule={rule} />
))}
</MsgDetailRhLbRulesWrapper>
</MsgDetailRhLbAddrestWrapper>
)}
</MsgDetailRhLbInnerWrapper>
<Link to={`/detail/${homeId}`} target="_blank">
<StButton>
<MsgDetailRhLbButtonWrapper>
<MsgDetailRhLbButtonInnerWrapper>
<FaDoorOpen />
<MsgDetailRhLbButtonText>숙소 보기</MsgDetailRhLbButtonText>
</MsgDetailRhLbButtonInnerWrapper>
<MdKeyboardArrowRight />
</MsgDetailRhLbButtonWrapper>
</StButton>
</Link>
</MsgDetailRhLbOuterWrapper>
</MsgDetailRhLbWrapper>
);
}
Example #3
| Source File: TripsCanceledItem.js From airdnd-frontend with MIT License | 6 votes |
|
TripsCanceledItem = ({
title,
reservationId,
homeImage,
addr,
ci,
co,
}) => {
return (
<TripsCanceledItemWrapper>
<Link to={`/schedule/${reservationId}`}>
<StButton>
<TripsCanceledButtonWrapper>
<TripsCanceledButtonInnerWrapper>
<TripsCanceledButtonImg src={`${homeImage}`} alt="#" />
<TripsCanceledTextWrapper>
<TripsCanceledTitle>{title}</TripsCanceledTitle>
<TripsCanceledCkLc>
{addr} · {ci} - {co}
</TripsCanceledCkLc>
</TripsCanceledTextWrapper>
</TripsCanceledButtonInnerWrapper>
<MdKeyboardArrowRight style={{ fontSize: '2.5rem' }} />
</TripsCanceledButtonWrapper>
</StButton>
</Link>
</TripsCanceledItemWrapper>
);
}
Example #4
| Source File: RegionSelectOption.js From covid19 with MIT License | 6 votes |
|
render() {
const { region, data, date, metric, darkMode } = this.props
return (
<div className="region-option">
<div>
{region.map(
(x, i) =>
i === region.length - 1 ? (
<span key={`region-${region[region.length - 1]}-${i}`}>{x}</span>
) : (
<Fragment key={`region-${region[region.length - 1]}-${i}`}>
<span>{x}</span>
<MdKeyboardArrowRight
size={14}
color={darkMode ? 'var(--light-grey)' : 'var(--dark-grey)'}
/>
</Fragment>
)
)}
</div>
<div className="region-option-count">{data[metric] && data[metric][date] ? data[metric][date] : 0}</div>
</div>
)
}
Example #5
| Source File: MsgDetailAddressBox.js From airdnd-frontend with MIT License | 5 votes |
|
MsgDetailAddressBox = ({ addr, lat, lng }) => {
return (
<MsgDetailAdrsWrapper>
<MsgDetailAdrsOuterWrapper>
<MsgDetailAdrsInnerWrapper>
<MsgDetailAdrsTitle>찾아가는 방법</MsgDetailAdrsTitle>
<MsgDetailAdrsAddrestWrapper>
<MsgDetailAdrsAddressTitle>주소</MsgDetailAdrsAddressTitle>
<MsgDetailAdrsAddress>{addr}</MsgDetailAdrsAddress>
</MsgDetailAdrsAddrestWrapper>
</MsgDetailAdrsInnerWrapper>
<CopyToClipboard text={addr}>
<StButton>
<MsgDetailAdrsButtonWrapper>
<MsgDetailAdrsButtonInnerWrapper>
<IoIosCopy />
<MsgDetailAdrsButtonText>주소 복사하기</MsgDetailAdrsButtonText>
</MsgDetailAdrsButtonInnerWrapper>
<MdKeyboardArrowRight />
</MsgDetailAdrsButtonWrapper>
</StButton>
</CopyToClipboard>
<a
href={`https://www.google.com/maps/place/${addr}/@${lat}/@${lng}`}
target="_blank"
rel="noopener noreferrer"
>
<StButton>
<MsgDetailAdrsButtonWrapper>
<MsgDetailAdrsButtonInnerWrapper>
<MdLocationOn />
<MsgDetailAdrsButtonText>
찾아가는 방법 보기
</MsgDetailAdrsButtonText>
</MsgDetailAdrsButtonInnerWrapper>
<MdKeyboardArrowRight />
</MsgDetailAdrsButtonWrapper>
</StButton>
</a>
</MsgDetailAdrsOuterWrapper>
</MsgDetailAdrsWrapper>
);
}
Example #6
| Source File: MsgDetailRefundBox.js From airdnd-frontend with MIT License | 5 votes |
|
MsgDetailRefundBox = ({
price,
onClickOpenModal,
onClickOpenReceiptPDF,
}) => {
return (
<MsgDetailSettlementWrapper>
<MsgDetailSettlementOuterWrapper>
<MsgDetailSettlementInnerWrapper>
<MsgDetailSettlementTitle>결제 정보</MsgDetailSettlementTitle>
<MsgDetailSettlementAddrestWrapper>
<MsgDetailSettlementAddressTitle>
총 비용
</MsgDetailSettlementAddressTitle>
<MsgDetailSettlementAddress>₩{price}</MsgDetailSettlementAddress>
</MsgDetailSettlementAddrestWrapper>
</MsgDetailSettlementInnerWrapper>
<StButton onClick={onClickOpenModal}>
<MsgDetailSettlementButtonWrapper>
<MsgDetailSettlementButtonInnerWrapper>
<MdAssignmentTurnedIn />
<MsgDetailSettlementButtonText>
출장 경비 청구를 위한 세부 정보 입력하기
</MsgDetailSettlementButtonText>
</MsgDetailSettlementButtonInnerWrapper>
<MdKeyboardArrowRight />
</MsgDetailSettlementButtonWrapper>
</StButton>
<StButton onClick={onClickOpenReceiptPDF}>
<MsgDetailSettlementButtonWrapper>
<MsgDetailSettlementButtonInnerWrapper>
<MdReceipt />
<MsgDetailSettlementButtonText>
영수증 받기
</MsgDetailSettlementButtonText>
</MsgDetailSettlementButtonInnerWrapper>
<MdKeyboardArrowRight />
</MsgDetailSettlementButtonWrapper>
</StButton>
</MsgDetailSettlementOuterWrapper>
</MsgDetailSettlementWrapper>
);
}
Example #7
| Source File: TripsPastCardItem.js From airdnd-frontend with MIT License | 5 votes |
|
TripsPastCardItem = ({
title,
homeImage,
addr,
withGuest,
dateDiff,
ci,
co,
myLastName,
myProfileImg,
guestLastName,
guestProfileImg,
}) => {
return (
<TripsPastCardItemWrapper>
<Link to="/schedule">
<TripsPastImgWrapper>
<TripsPastImg homeImage={homeImage} />
{withGuest && (
<TripsProfileWrapper>
<Profile
lastName={myLastName}
size="4.3rem"
profileImg={myProfileImg}
/>
<Profile
lastName={guestLastName}
size="4.3rem"
profileImg={guestProfileImg}
/>
</TripsProfileWrapper>
)}
</TripsPastImgWrapper>
<TripsPastCkLcWrapper>
<TripsPastCheckInOut>
{ci} - {co}
</TripsPastCheckInOut>
<TripsPastLocation>{addr}</TripsPastLocation>
</TripsPastCkLcWrapper>
<StDiv>
<Link to="/schedule/1">
<StButton>
<TripsPastButtonWrapper>
<TripsPastButtonInnerWrapper>
<TripsPastImgInButton src={`${homeImage}`} alt="#" />
<TripsPastButtonText>{title}</TripsPastButtonText>
</TripsPastButtonInnerWrapper>
<MdKeyboardArrowRight />
</TripsPastButtonWrapper>
</StButton>
</Link>
{dateDiff > 1 && (
<Link to="/schedues/2">
<StButton>
<TripsPastButtonWrapper>
<TripsPastButtonInnerWrapper>
<TripsPastImgInButton src={`${homeImage}`} alt="#" />
<TripsPastButtonText>{title}</TripsPastButtonText>
</TripsPastButtonInnerWrapper>
<MdKeyboardArrowRight />
</TripsPastButtonWrapper>
</StButton>
</Link>
)}
</StDiv>
</Link>
<Link to="/schedule">
<StMoreButton border="none">여행 계획 더보기</StMoreButton>
</Link>
</TripsPastCardItemWrapper>
);
}
Example #8
| Source File: TripsUpcomingCardItem.js From airdnd-frontend with MIT License | 5 votes |
|
TripsUpcomingCardItem = ({
title,
homeImage,
addr,
withGuest,
guest,
dateDiff,
ci,
co,
myLastName,
myProfileImg,
}) => {
return (
<TripsUpcomingCardItemWrapper>
<Link to="/schedule">
<TripsUpcomingImgWrapper>
<TripsUpcomingImg homeImage={homeImage} />
{withGuest && (
<TripsProfileWrapper>
<Profile
lastName={`${myLastName}`}
size="4.3rem"
profileImg={myProfileImg}
/>
<Profile
// lastName={`${gstLastName}`}
size="4.3rem"
// profileImg={gstProfileImg}
/>
</TripsProfileWrapper>
)}
</TripsUpcomingImgWrapper>
<TripsUpcomingCkLcWrapper>
<TripsUpcomingCheckInOut>
{ci} - {co}
</TripsUpcomingCheckInOut>
<TripsUpcomingAddr>{addr}</TripsUpcomingAddr>
</TripsUpcomingCkLcWrapper>
<StDiv>
<Link to="/schedule/1">
<StButton>
<TripsUpcomingButtonWrapper>
<TripsUpcomingButtonInnerWrapper>
<TripsUpcomingImgInButton src={`${homeImage}`} alt="#" />
<TripsUpcomingButtonText>{title}</TripsUpcomingButtonText>
</TripsUpcomingButtonInnerWrapper>
<MdKeyboardArrowRight />
</TripsUpcomingButtonWrapper>
</StButton>
</Link>
{dateDiff > 1 && (
<Link to="/schedues/2">
<StButton>
<TripsUpcomingButtonWrapper>
<TripsUpcomingButtonInnerWrapper>
<TripsUpcomingImgInButton src={`${homeImage}`} alt="#" />
<TripsUpcomingButtonText>{title}</TripsUpcomingButtonText>
</TripsUpcomingButtonInnerWrapper>
<MdKeyboardArrowRight />
</TripsUpcomingButtonWrapper>
</StButton>
</Link>
)}
</StDiv>
</Link>
<Link to="/schedule">
<StMoreButton border="none">여행 계획 더보기</StMoreButton>
</Link>
</TripsUpcomingCardItemWrapper>
);
}
Example #9
| Source File: categoriesItem.js From next-ecommerce with MIT License | 5 votes |
|
export default function CategoriesItem({ category }) {
const Icon = iconSlugs[category.md_icon];
return (
<li key={category.id}>
<Link href={`/category/${category.name}`}>
<a>
<div className="content">
<div className="icon">
<Icon color="#D8D8D8" size="22" />
</div>
<p>{category.label}</p>
</div>
<div className="arrow-button">
<MdKeyboardArrowRight color="#D8D8D8" size="26" />
</div>
</a>
</Link>
<style jsx>{`
li a {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 18px;
text-decoration: none;
font-weight: 500;
font-size: 13px;
color: #808080;
border-bottom: 2px solid #f5f5f5;
transition: 0.4s;
}
li a:hover {
background: #f2f2f2;
}
li a .content {
display: flex;
flex-direction: row;
align-items: center;
}
li a .content .icon {
padding-right: 18px;
}
li a .arrow-button {
align-self: flex-end;
}
`}</style>
</li>
);
}
Example #10
| Source File: landing.js From News24x7-Client with MIT License | 5 votes |
|
ArrowRight = styled(MdKeyboardArrowRight)`
margin-left: 8px;
font-size: 20px;
`
Example #11
| Source File: MsgDetailAirbnbSupportTeamBox.js From airdnd-frontend with MIT License | 4 votes |
|
MsgDetailAirbnbSupportTeamBox = ({
isCanceled,
onClickOpenModal,
onClickOpenFlagModal,
}) => {
return (
<MsgDetailAstWrapper>
<MsgDetailAstOuterWrapper>
<MsgDetailAstInnerWrapper>
<MsgDetailAstTitle>에어비엔비 지원</MsgDetailAstTitle>
</MsgDetailAstInnerWrapper>
<a
href="https://www.airbnb.co.kr/help/home"
rel="noopener noreferrer"
target="_blank"
>
<StButton>
<MsgDetailAstButtonWrapper>
<MsgDetailAstButtonInnerWrapper>
<MdHelp />
<MsgDetailAstButtonText>도움말 센터</MsgDetailAstButtonText>
</MsgDetailAstButtonInnerWrapper>
<MdKeyboardArrowRight />
</MsgDetailAstButtonWrapper>
</StButton>
</a>
<a
href="https://www.airbnb.co.kr/resolutions"
rel="noopener noreferrer"
target="_blank"
>
<StButton>
<MsgDetailAstButtonWrapper>
<MsgDetailAstButtonInnerWrapper>
<AiFillHome />
<MsgDetailAstButtonText>해결 센터</MsgDetailAstButtonText>
</MsgDetailAstButtonInnerWrapper>
<MdKeyboardArrowRight />
</MsgDetailAstButtonWrapper>
</StButton>
</a>
{isCanceled ? (
<StButton onClick={onClickOpenFlagModal}>
<MsgDetailAstButtonWrapper>
<MsgDetailAstButtonInnerWrapper>
<MdFlag />
<MsgDetailAstButtonText>호스트 신고하기</MsgDetailAstButtonText>
</MsgDetailAstButtonInnerWrapper>
<MdKeyboardArrowRight />
</MsgDetailAstButtonWrapper>
</StButton>
) : (
<>
<a href="tel:+8210-6415-4738">
<StButton>
<MsgDetailAstButtonWrapper>
<MsgDetailAstButtonInnerWrapper>
<MdPhoneIphone />
<MsgDetailAstButtonText>
호스트에게 전화하기
</MsgDetailAstButtonText>
</MsgDetailAstButtonInnerWrapper>
<MdKeyboardArrowRight />
</MsgDetailAstButtonWrapper>
</StButton>
</a>
<StButton onClick={onClickOpenModal}>
<MsgDetailAstButtonWrapper>
<MsgDetailAstButtonInnerWrapper>
<MdPhoneIphone />
<MsgDetailAstButtonText>
출장자를 위한 고객 지원팀에 연락하기
</MsgDetailAstButtonText>
</MsgDetailAstButtonInnerWrapper>
<MdKeyboardArrowRight />
</MsgDetailAstButtonWrapper>
</StButton>
</>
)}
</MsgDetailAstOuterWrapper>
</MsgDetailAstWrapper>
);
}
Example #12
| Source File: MsgDetailSubInfoBox.js From airdnd-frontend with MIT License | 4 votes |
|
MsgDetailSubInfoBox = ({
guest,
profileImg,
guestProfileImg,
reservationId,
isCanceled,
onClickOpenModal,
onClickOpenPrint,
onClickOpenReceiptPDF,
homeId,
}) => {
return (
<MsgDetailSiWrapper>
{isCanceled ? (
<MsgDetailSiOuterWrapper>
<MsgDetailSiInnerWrapper>
<MsgDetailSiTitle>예약 세부정보</MsgDetailSiTitle>
<MsgDetailSiReservedNumberWrapper isCanceled={isCanceled}>
<MsgDetailSiReservedNumberText>
예약 번호
</MsgDetailSiReservedNumberText>
<MsgDetailSiReservedNumber>
{reservationId}
</MsgDetailSiReservedNumber>
</MsgDetailSiReservedNumberWrapper>
<MsgDetailSiReservedNumberWrapper>
<MsgDetailSiReservedNumberText>
환불 정책
</MsgDetailSiReservedNumberText>
<MsgDetailSiReservedNumber>
유연. 체크인 1일 전까지 취소 시 전액 환불.
</MsgDetailSiReservedNumber>
</MsgDetailSiReservedNumberWrapper>
<MsgDetailSiReservedNumberWrapper>
<MsgDetailSiReservedNumberText>
결제 세부정보
</MsgDetailSiReservedNumberText>
<MsgDetailSiReservedNumber>
<div>총 비용: ₩0</div>
<Link to="/printreceipt" target="_blank">
<Button
btnType="underlined"
padding="0rem"
hover={'color: black'}
style={{
color: 'gray',
borderRadius: '0px',
marginTop: '1rem',
}}
>
영수증 보기
</Button>
</Link>
</MsgDetailSiReservedNumber>
</MsgDetailSiReservedNumberWrapper>
</MsgDetailSiInnerWrapper>
<Link to={`/detail/${homeId}`} target="_blank">
<StButton>
<MsgDetailSiButtonWrapper>
<MsgDetailSiButtonInnerWrapper>
<FaDoorOpen />
<MsgDetailSiButtonText>숙소 보기</MsgDetailSiButtonText>
</MsgDetailSiButtonInnerWrapper>
<MdKeyboardArrowRight />
</MsgDetailSiButtonWrapper>
</StButton>
</Link>
</MsgDetailSiOuterWrapper>
) : (
<MsgDetailSiOuterWrapper>
<MsgDetailSiInnerWrapper>
<MsgDetailSiTitle>예약 세부정보</MsgDetailSiTitle>
<MsgDetailSiGuestProfilesWrapper>
<MsgDetailSiGuestWrapper>
<MsgDetailSiGuestText>게스트</MsgDetailSiGuestText>
<MsgDetailSiGuestCount>
게스트 {guest + 1}명
</MsgDetailSiGuestCount>
</MsgDetailSiGuestWrapper>
<MsgDetailSiGuestProfileLists guest={guest}>
{!!guest && (
<MsgDetailSiGuestProfileItem>
<Profile
lastName="박"
size="4.8rem"
profileImg={guestProfileImg}
/>
</MsgDetailSiGuestProfileItem>
)}
<MsgDetailSiGuestProfileItem>
<Profile
lastName="박"
size="4.8rem"
profileImg={profileImg}
/>
</MsgDetailSiGuestProfileItem>
</MsgDetailSiGuestProfileLists>
</MsgDetailSiGuestProfilesWrapper>
<MsgDetailSiReservedNumberWrapper>
<MsgDetailSiReservedNumberText>
예약 번호
</MsgDetailSiReservedNumberText>
<MsgDetailSiReservedNumber>
{reservationId}
</MsgDetailSiReservedNumber>
</MsgDetailSiReservedNumberWrapper>
</MsgDetailSiInnerWrapper>
<StButton onClick={onClickOpenModal}>
<MsgDetailSiButtonWrapper>
<MsgDetailSiButtonInnerWrapper>
<FaGlobe />
<MsgDetailSiButtonText>
여행일정표 PDF로 받기(비자신청용)
</MsgDetailSiButtonText>
</MsgDetailSiButtonInnerWrapper>
<MdKeyboardArrowRight />
</MsgDetailSiButtonWrapper>
</StButton>
<StButton onClick={onClickOpenPrint}>
<MsgDetailSiButtonWrapper>
<MsgDetailSiButtonInnerWrapper>
<MdPrint />
<MsgDetailSiButtonText>세부정보 인쇄하기</MsgDetailSiButtonText>
</MsgDetailSiButtonInnerWrapper>
<MdKeyboardArrowRight />
</MsgDetailSiButtonWrapper>
</StButton>
<StButton onClick={onClickOpenReceiptPDF}>
<MsgDetailSiButtonWrapper>
<MsgDetailSiButtonInnerWrapper>
<MdReceipt />
<MsgDetailSiButtonText>영수증 받기</MsgDetailSiButtonText>
</MsgDetailSiButtonInnerWrapper>
<MdKeyboardArrowRight />
</MsgDetailSiButtonWrapper>
</StButton>
</MsgDetailSiOuterWrapper>
)}
</MsgDetailSiWrapper>
);
}
