| import React, { useState } from 'react'; | |
| import { Container } from './style'; | |
| import Skeleton from 'react-loading-skeleton'; | |
| import { | |
| capitalizeFirstNameLetter, | |
| replaceDotWithComma, | |
| } from '../../utils/informationFormatters'; | |
| function Header(props) { | |
| const loading = props.loading; | |
| let name; | |
| let balance; | |
| if (!loading) { | |
| name = capitalizeFirstNameLetter(props.userInformation.name); | |
| balance = replaceDotWithComma(props.userInformation.balance); | |
| } | |
| return ( | |
| <Container> | |
| {!loading && <h1>Olá, {name}</h1>} | |
| {loading && ( | |
| <Skeleton width={350} height={50} style={{ marginBottom: 12 }} /> | |
| )} | |
| {!loading && <p>O seu saldo é R${balance}</p>} | |
| {loading && ( | |
| <Skeleton width={230} height={24} style={{ marginTop: 16 }} /> | |
| )} | |
| </Container> | |
| ); | |
| } | |
| export default Header; | |