Last active
May 28, 2020 21:25
-
-
Save EmersonGarrido/8d6c57394544dff833a0c4db665dfb06 to your computer and use it in GitHub Desktop.
Cabaço File
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
`; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment