one-product-system-6.tsx

import styled from "styled-components";
import {
  Button,
  ButtonColor,
  ButtonSize,
  Colors,
  FormGroup,
  Input,
  TextStyles
} from "@class101/ui";

const Form = styled.form`
  display: flex;
  flex-direction: column;
`;

const StyledFormGroup = styled(FormGroup)`
  margin-bottom: 12px;
`;

const StyledInput = styled(Input)`
  margin-top: 2px;
`;

const ResetPasswordLink = styled.a`
  ${TextStyles.caption1};
  color: ${Colors.gray500};
  display: block;
  float: left;
  text-decoration: none;
`;

const SignUpLink = styled.a`
  ${TextStyles.caption1};
  color: ${Colors.gray500};
  display: block;
  float: right;
  text-decoration: none;
`;

const StyledButton = styled(Button)`
  margin: 16px 0;
`;

const EmailLoginForm = () => (
  <Form>
    <StyledFormGroup label="이메일" labelColor={Colors.gray900}>
      <StyledInput type="email" name="email" placeholder="example@gmail.com" />
    </StyledFormGroup>
    <StyledFormGroup label="비밀번호" labelColor={Colors.gray900}>
      <StyledInput type="password" name="password" placeholder="********" />
    </StyledFormGroup>
    <div>
      <ResetPasswordLink href="/reset-password">
        비밀번호를 잊으셨나요?
      </ResetPasswordLink>
      <SignUpLink href="/sign-up">회원 가입하기</SignUpLink>
    </div>
    <StyledButton
      type="submit"
      color={ButtonColor.ORANGE}
      size={ButtonSize.LARGE}
    >
      로그인
    </StyledButton>
  </Form>
);

export default EmailLoginForm;