Estilando el formulario

Así me quedo

Diseñando el Sign in y Sign up con validación y efecto de rotación de formulario 😃

Mi diseño:

Styles.js

import styled from 'styled-components'

export const Form = styled.form`
  padding: 16px 0;
`

export const Input = styled.input`
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 8px;
  padding: 8px 4px;
  display: block;
  width: 100%;
`

export const Button = styled.button`
  background: #8d00ff;
  border-radius: 3px;
  color: #fff;
  height: 32px;
  display: block;
  width: 100%;
  text-align: center;
`

export const Title = styled.h2`
  font-size: 16px;
  font-weight: 500;
  padding: 8px 0;
` 

El mío quedo así

Me gusto demasiado que en este curso todo se hace en el momento y no traen cosas hechas que copian y pegan!. Experiencia de estudiante 1000 puntos!!!

Asi va quedando el login

Hago uso del hook useLocation de React Router DOM, para identificar si el usuario está en la pagina de registro o de login, y de acuerdo al pathname, se renderiza un texto para crear una cuenta o para iniciar sesión.
.

.

import { Fragment } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { FaRegUserCircle } from 'react-icons/fa'
import { Form, Input, Button, Title, FormWrapper, Text } from './styles'

import { useForm } from '../../hooks/useForm'

export const UserForm = ({ onSubmit, title }) => {
  let location = useLocation()
  const initialState = {
    email: '',
    password: ''
  }

  const [state, onChange] = useForm(initialState)
  const { email, password } = state

  const BottomText = () => (
    location.pathname === '/register'
      ? <Text>¿Ya tienes cuenta? <Link to='/login'>Inicia Sesión.</Link></Text>
      : <Text>¿Aún no tienes cuenta? <Link to='/register'>Crea una cuenta.</Link></Text>
  )

  return (
    <Fragment>
      <FormWrapper>
        <Title><FaRegUserCircle /></Title>
        <Form onSubmit={onSubmit}>
          <Input
            type='text'
            placeholder='Email'
            name='email'
            value={email}
            onChange={onChange}
          />
          <Input
            type='Password'
            placeholder='Password'
            name='password'
            value={password}
            onChange={onChange}
          />
          <Button type='submit'>{title}</Button>
        </Form>
        <BottomText />
      </FormWrapper>
    </Fragment>
  )
}

Genial, ya quiero llegar a las bases de datos :3

como uso sass!!

Fragment

<>
code
</>

me arroja este error, alguien me puede ayudar?

WARNING in ./src/container/ListOfPhotoCards.js 3:30-40
"export 'withPhotos' was not found in '../hoc/withPhotos'
 @ ./src/pages/Home.js
 @ ./src/App.js
 @ ./src/index.js
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [../../node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] /mnt/c/Users/SAMSUNG/Documents/PLATZI/node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 535 bytes {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Compiled with warnings.```

Así va hasta el momento:)

¿Sería una mala practica colocar el <h2> dentro del <Form> ? 🤔

ni siquiera poniendo el video a 0.5 puedo seguir al profesor cuando escribe css xD

Hola, les dejo el avance de mi repositorio para este proyecto hecho en Nextjs:

https://github.com/danyel117/petgram-platzi/tree/userform