react-icons/md#MdKeyboardArrowLeft JavaScript Examples

The following examples show how to use react-icons/md#MdKeyboardArrowLeft. 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: MsgFlagModal.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
MsgFlagModal = ({
  modalState,
  onClickCloseModal,
  onClickNext,
  onClickPrev,
  next,
}) => {
  return (
    <StFlagModal
      width="55rem"
      height="fit-content"
      modalState={modalState}
      setModalState={onClickCloseModal}
    >
      <StFlagModalTitle>어떤 문제가 있나요?</StFlagModalTitle>
      <StFlagModalSub>
        <StFaLock />
        <StFlagModalDescription>
          이정보는 에어비앤비만 볼 수 있습니다.
        </StFlagModalDescription>
      </StFlagModalSub>
      {next ? (
        <StFlagModalRadioWrapper>
          <StFlagModalLabel>
            <StFlagModalText>동네에서 호스팅하는 것이 걱정돼요</StFlagModalText>
            <StFlagModalInput type="radio" name="etc" />
          </StFlagModalLabel>
          <StFlagModalLabel>
            <StFlagModalText>이 페이지 일부가 잘 보이지 않아요</StFlagModalText>
            <StFlagModalInput type="radio" name="etc" />
          </StFlagModalLabel>
        </StFlagModalRadioWrapper>
      ) : (
        <StFlagModalRadioWrapper>
          <StFlagModalLabel>
            <StFlagModalText>
              사기 또는 스팸 메시지를 보내는 것 같아요
            </StFlagModalText>
            <StFlagModalInput type="radio" name="flag" />
          </StFlagModalLabel>
          <StFlagModalLabel>
            <StFlagModalText>불쾌해요</StFlagModalText>
            <StFlagModalInput type="radio" name="flag" />
          </StFlagModalLabel>
          <StFlagModalLabel>
            <StFlagModalText>기타</StFlagModalText>
            <StFlagModalInput type="radio" name="flag" />
          </StFlagModalLabel>
        </StFlagModalRadioWrapper>
      )}
      <StFlagButtonWrapper next={next}>
        {next && (
          <StBackButton
            border="none"
            hover="none"
            padding="1.5rem 0rem"
            onClick={onClickPrev}
          >
            <MdKeyboardArrowLeft />
            뒤로
          </StBackButton>
        )}
        <StFlagButton
          border="none"
          color="green"
          padding="1.5rem 2.5rem"
          hover="none"
          onClick={next ? onClickCloseModal : onClickNext}
        >
          {next ? '다음' : '확인'}
        </StFlagButton>
      </StFlagButtonWrapper>
    </StFlagModal>
  );
}
Example #2
Source File: MsgSectionHeader.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
MsgSectionHeader = ({
  activeMsg,
  media,
  msgDetailSectionState,
  onClickShowList,
  onClickToggleDetail,
  onClickArchive,
  hostname,
  state,
}) => {
  return (
    <MsgSectionHeaderWrapper>
      <MsgSectionHeaderTitle>
        {activeMsg && media === 'medium' && msgDetailSectionState && (
          <Button
            btnType="circle"
            border="none"
            hover={{ backgroundColor: theme.color.lightGray }}
            fontSize="3rem"
            style={{ width: '4rem', height: '4rem', marginRight: '3rem' }}
            onClick={onClickShowList}
          >
            <MdKeyboardArrowLeft />
          </Button>
        )}
        {hostname}
      </MsgSectionHeaderTitle>
      <MsgSectionHeaderButtonWrapper>
        {activeMsg && state !== 'unread' && (
          <StStroageButton
            btnType="circle"
            border="none"
            hover={{ backgroundColor: theme.color.lightGray }}
            onClick={onClickArchive}
          >
            <StMsgSectionHeaderStorageIcon />
            <Tooltip state={state} />
          </StStroageButton>
        )}
        {msgDetailSectionState ? (
          activeMsg && (
            <Button
              btnType="oval"
              border={`2px solid ${theme.color.black}`}
              hover="none"
              fontSize="1.2rem"
              style={{
                backgroundColor: `${theme.color.lightGray}`,
                fontWeight: '600',
              }}
              onClick={onClickToggleDetail}
            >
              세부 정보 숨기기
            </Button>
          )
        ) : (
          <Button
            btnType="oval"
            border={`1px solid ${theme.color.gray}`}
            hover={{ border: `1px solid ${theme.color.black}` }}
            fontSize="1.2rem"
            style={{ fontWeight: '400' }}
            onClick={onClickToggleDetail}
          >
            세부 정보 보기
          </Button>
        )}
      </MsgSectionHeaderButtonWrapper>
    </MsgSectionHeaderWrapper>
  );
}