Usando styled-components (y para íconos, styled-icons) hacer los siguientes ejercicios.
Replicar el siguiente diseño (no tiene que funcionar)
Replicar el siguiente diseño (no tiene que funcionar, y sin el fondo)
Crear una tarjeta de contacto, que tenga las siguientes props:
- name: el nombre y apellido del contacto
- email: el email del contacto
- showAvatar:
truesi el avatar se muestra,falsesi no - avatarShape: "square" para cuadrado con un pequeño
border-radius, o "circle" paraborder-radius: 50% - size: los valores posibles son
sm(small),md(medium) ylg(large). Dependiendo el tamaño que se elija, se modifica el tamaño del texto, del avatar y del padding de la card.
El componente renderiza algo similar a esto a nivel de estructura:
El avatar se genera con las iniciales del nombre y apellido del contacto, y un color de fondo aleatorio.
Pueden hacerlo por su propia cuenta, o usar esta api.