Cabaço File

index.tsx

import React, { useState, useEffect } from 'react';
import { View, ScrollView } from 'react-native';
import { FontAwesome, Ionicons, Feather } from '@expo/vector-icons';
import Icon from '@expo/vector-icons/build/Feather';

import COLORS from '../../constants/index';
import * as S from './styles';

const Profile: React.FC = () => {
  const [avatar, setAvatar] = useState('');

  return (
    <S.Container>
      <S.HeaderContainer>
        <S.User />
      </S.HeaderContainer>

      <S.HeaderName>Emerson Garrido</S.HeaderName>
      <S.Description>emersongarrido@hotmail.com.br</S.Description>
      <S.MenuContainer>
        <ScrollView>
          <S.MenuList>
            <S.MenuListItem>
              <FontAwesome
                name="user-circle"
                size={25}
                color={COLORS.colors.primary}
              />
              <S.MenuListItemContainerText>
                <S.MenuListItemText>Editar Perfil</S.MenuListItemText>
              </S.MenuListItemContainerText>
              <Ionicons
                name="ios-arrow-forward"
                size={25}
                color={COLORS.colors.primary}
              />
            </S.MenuListItem>
            <S.LineSeparetor />
            <S.MenuListItem>
              <FontAwesome
                name="file-pdf-o"
                size={25}
                color={COLORS.colors.primary}
              />
              <S.MenuListItemContainerText>
                <S.MenuListItemText>Ver Meus Laudos</S.MenuListItemText>
              </S.MenuListItemContainerText>
              <Ionicons
                name="ios-arrow-forward"
                size={25}
                color={COLORS.colors.primary}
              />
            </S.MenuListItem>
            <S.LineSeparetor />
            <S.MenuListItem>
              <FontAwesome
                name="file-o"
                size={25}
                color={COLORS.colors.primary}
              />
              <S.MenuListItemContainerText>
                <S.MenuListItemText>Gerar Novo Laudo</S.MenuListItemText>
              </S.MenuListItemContainerText>
              <Ionicons
                name="ios-arrow-forward"
                size={25}
                color={COLORS.colors.primary}
              />
            </S.MenuListItem>
            <S.LineSeparetor />
            <S.MenuListItem>
              <FontAwesome
                name="users"
                size={25}
                color={COLORS.colors.primary}
              />
              <S.MenuListItemContainerText>
                <S.MenuListItemText>Gerenciar Minha Equipe</S.MenuListItemText>
              </S.MenuListItemContainerText>
              <Ionicons
                name="ios-arrow-forward"
                size={25}
                color={COLORS.colors.primary}
              />
            </S.MenuListItem>
            <S.LineSeparetor />
            <S.MenuListItem>
              <Feather
                name="help-circle"
                size={25}
                color={COLORS.colors.primary}
              />
              <S.MenuListItemContainerText>
                <S.MenuListItemText>Suporte</S.MenuListItemText>
              </S.MenuListItemContainerText>
              <Ionicons
                name="ios-arrow-forward"
                size={25}
                color={COLORS.colors.primary}
              />
            </S.MenuListItem>
            <S.LineSeparetor />
            <S.MenuListItem>
              <Icon name="log-in" size={20} color={COLORS.colors.primary} />
              <S.MenuListItemContainerText>
                <S.MenuListItemText>Sair</S.MenuListItemText>
              </S.MenuListItemContainerText>
              <Ionicons
                name="ios-arrow-forward"
                size={25}
                color={COLORS.colors.primary}
              />
            </S.MenuListItem>
            <S.LineSeparetor />
          </S.MenuList>
        </ScrollView>
      </S.MenuContainer>
    </S.Container>
  );
};

export default Profile;

styles.ts

import styled from 'styled-components/native';
import { Platform } from 'react-native';
import { getStatusBarHeight } from 'react-native-iphone-x-helper';

import theme from '../../constants';
import COLORS from '../../constants/index';

export const Container = styled.View`
  flex: 1;
  align-items: center;
  padding: 0 10px;
  background-color: ${theme.colors.white};
  margin-top: ${Platform.OS === 'ios' ? `${getStatusBarHeight()}px` : '0'};
`;

export const Text = styled.Text``;

export const HeaderContainer = styled.View`
  align-items: center;
  background-color: black;
  padding: 0px;
  margin: 0;
`;

export const User = styled.Image.attrs({
  source: require('../../assets/user.png'),
  resizeMode: 'contain',
})`
  width: 110px;
`;

export const HeaderName = styled.Text`
  font-size: 18px;
`;

export const Description = styled.Text`
  font-size: 12px;
`;
/**
 * Menu Container
 *
 */

export const MenuContainer = styled.View`
  justify-content: center;
  padding: 10px 0;
  border-radius: 5px;
  width: 100%;
`;
export const MenuList = styled.View`
  overflow: hidden;
  border-radius: 5px;
  padding: 5px;
`;
export const MenuListItem = styled.TouchableOpacity.attrs({
  activeOpacity: 0.6,
})`
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 5px;
  margin: 3px 0;
`;
export const MenuListItemContainerText = styled.View`
  flex: 1;
  padding: 0 10px;
`;
export const MenuListItemText = styled(HeaderName)`
  font-size: 16px;
`;
export const LineSeparetor = styled.View`
  background-color: ${COLORS.colors.primary};
  width: 100%;
  height: 1px;
`;