react-icons/ai#AiOutlineMail JavaScript Examples

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>
)

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

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

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 />
    },

]