react-icons/ai#AiOutlineMail JavaScript Examples

The following examples show how to use react-icons/ai#AiOutlineMail. 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: index.js    From portfolio with MIT License 6 votes vote down vote up 
NavDropDown = (props) => (
  <DropDownContainer active={props.isOpen}>
    <DropDownItem href="#" target="_blank" rel="noreferrer">
      <DropDownIcon>
        <AiFillPhone />
      </DropDownIcon>
      <DropDownTextContainer>
        <DropDownItemTitle>Phone</DropDownItemTitle>
        <DropDownItemDesc>Let's get together and have a chat?'</DropDownItemDesc>
      </DropDownTextContainer>
    </DropDownItem>
    <DropDownItem href="#" target="_blank" rel="noreferrer">
      <DropDownIcon>
        <AiOutlineMail />
      </DropDownIcon>
      <DropDownTextContainer>
        <DropDownItemTitle>Email</DropDownItemTitle>
        <DropDownItemDesc>If you want to talk jus send a message and I'll get back</DropDownItemDesc>
      </DropDownTextContainer>
    </DropDownItem>
    <DropDownItem href="#" target="_blank" rel="noreferrer">
      <DropDownIcon>
        <FaLocationArrow />
      </DropDownIcon>
      <DropDownTextContainer>
        <DropDownItemTitle>Address</DropDownItemTitle>
        <DropDownItemDesc>1405, Angelus Dr, Florissant. Mo</DropDownItemDesc>
      </DropDownTextContainer>
    </DropDownItem>
  </DropDownContainer>
)
Example #2
Source File: SignupMenuModal.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
SignupMenuModal = ({
  modalVisible,
  openLoginModal,
  openSignupEmailModal,
  closeModal,
  onSuccessGoogle,
  onFailureGoogle,
}) => {
  return (
    <StSignupMenuModal
      modalState={modalVisible}
      header
      title="회원가입"
      width="570px"
      height="380px"
      setModalState={closeModal}
    >
      <StSignupFormWrapper>
        <GoogleLogin
          clientId={process.env.REACT_APP_GOOGLE_LOGIN_API_KEY}
          cookiePolicy={'single_host_origin'}
          onSuccess={onSuccessGoogle}
          onFailure={onFailureGoogle}
          render={renderProps => (
            <StFacebookButton onClick={renderProps.onClick}>
              <FaFacebookF />
              <StButtonText>페이스북 계정으로 회원 가입</StButtonText>
            </StFacebookButton>
          )}
        ></GoogleLogin>
        <GoogleLogin
          clientId={process.env.REACT_APP_GOOGLE_LOGIN_API_KEY}
          cookiePolicy={'single_host_origin'}
          onSuccess={onSuccessGoogle}
          onFailure={onFailureGoogle}
          render={renderProps => (
            <StGoogleButton onClick={renderProps.onClick}>
              <FcGoogle />
              <StButtonText>구글 계정으로 회원 가입</StButtonText>
            </StGoogleButton>
          )}
        ></GoogleLogin>
        <StDividerLine />
        <StDividerText>또는</StDividerText>
        <StEmailButton onClick={openSignupEmailModal}>
          <AiOutlineMail />
          <StButtonText>이메일로 회원 가입</StButtonText>
        </StEmailButton>
        <StDividerLine />
        <StLoginButtonWrapper>
          <StLoginText>이미 에어비앤비 계정이 있나요?</StLoginText>
          <StLoginButton btnType="color" onClick={openLoginModal}>
            로그인
          </StLoginButton>
        </StLoginButtonWrapper>
      </StSignupFormWrapper>
    </StSignupMenuModal>
  );
}
Example #3
Source File: index.jsx    From roomie-frontend with MIT License 5 votes vote down vote up 
Signup = () => {
  const { activateUserId } = useContext(Context);
  const [form, setForm] = useState({});

  const handleOnSubmit = async (event) => {
    event.preventDefault();
    const { username, password } = form;

    try {
      const { data } = await axios.post('https://peaceful-bastion-02967.herokuapp.com/api/auth/sign-up', {
        username,
        password,
      });

      const userId = data.data;
      window.location.href = '/create/profile';
      activateUserId(userId);
    } catch (error) {
      console.log(error);
    }
  };

  const handleTextInput = (event) => {
    const { target } = event;

    setForm({
      ...form,
      [target.name]: target.value,
    });
  };

  return (
    <Layout title='Sign up!' description='Sign up'>
      <Wrapper>
        <Form onSubmit={handleOnSubmit} title='Create an account'>
          <Description text='Create an account to access.' />
          <TitleInput text=' Email'>
            <AiOutlineMail />
          </TitleInput>
          <Input name='username' onChange={handleTextInput} type='email' placeholder='Email' required />
          <TitleInput text=' Password'>
            <FiLock />
          </TitleInput>
          <Input name='password' onChange={handleTextInput} type='password' placeholder='Password' required />
          <p>
            Not your first time here?
            <Link to='/signin'> Signin</Link>
          </p>
          <FormButton text='Signup!' />
        </Form>
      </Wrapper>
    </Layout>
  );
}
Example #4
Source File: servicesData.js    From developer-portfolio with Apache License 2.0 5 votes vote down vote up 
servicesData = [
    // {
    //     id: 1,
    //     title: 'Marketing',
    //     icon: <BiShoppingBag/>
    // },
    {
        id: 2,
        title: 'Content Writing',
        icon: <BiPencil /> 
    },
    {
        id: 3,
        title: 'Email Marketing',
        icon: <AiOutlineMail />
    },
    // {
    //     id: 4,
    //     title: 'Internet Research',
    //     icon: <FaInternetExplorer />
    // },
    // {
    //     id: 5,
    //     title: 'Tutoring',
    //     icon: <FaChalkboardTeacher />
    // },

    {
        id: 6,
        title: 'Web Design',
        icon: <BsCodeSlash />
    },
    {
        id: 7,
        title: 'Photography',
        icon: <FaCameraRetro />
    },
    // {
    //     id: 8,
    //     title: 'Pinterest Virtual Assistant',
    //     icon: <FaPinterest />
    // }, 
    {
        id: 9,
        title: 'Video Editing',
        icon: <FaVideo />
    },
    // {
    //     id: 10,
    //     title: 'Data Entry', 
    //     icon: <BsClipboardData />
    // },
    {
        id: 11,
        title: 'Ebook Writing',
        icon: <FaTabletAlt />
    },
    // {
    //     id: 12,
    //     title: 'Audio Transcription',
    //     icon: <AiFillAudio />
    // },
    {
        id: 13,
        title: 'Blog Posting',
        icon: <FaRegNewspaper />
    },

]