diff --git a/mobile/src/components/Header/index.js b/mobile/src/components/Header/index.js index 8933ea0..035790f 100644 --- a/mobile/src/components/Header/index.js +++ b/mobile/src/components/Header/index.js @@ -1,18 +1,17 @@ -import React, {useState} from 'react'; -import { View, Text, FlatList } from 'react-native'; +import React from 'react'; +import { Text } from 'react-native'; import { LinearGradient } from 'expo-linear-gradient'; +import Icon from 'react-native-vector-icons/Feather'; import styles from './styles'; -const Header = props => { - - return ( - - {props.title} - - ); -} +const Header = ({ title, onPressBack }) => ( + + {onPressBack ? : null} + {title} + +); -export default Header; \ No newline at end of file +export default Header; diff --git a/mobile/src/components/Header/styles.js b/mobile/src/components/Header/styles.js index c0e2437..67e19bc 100644 --- a/mobile/src/components/Header/styles.js +++ b/mobile/src/components/Header/styles.js @@ -1,24 +1,33 @@ import { StyleSheet } from 'react-native'; const styles = StyleSheet.create({ - top: { - height: 250, - width: 300, - alignSelf: 'center', - top: -100, - borderBottomLeftRadius: 1000, - borderBottomRightRadius: 1000, - transform: [{scaleX: 2}] - }, - pageTitle: { - fontSize: 20, - color: '#ffffff', - lineHeight: 22, - fontFamily: 'Fjalla-One', - top: 175, - alignSelf: 'center', - transform: [{scaleX: 1/2}], - }, + top: { + height: 250, + width: 300, + alignSelf: 'center', + top: -100, + borderBottomLeftRadius: 1000, + borderBottomRightRadius: 1000, + transform: [{ scaleX: 2 }], + }, + pageTitle: { + fontSize: 20, + color: '#ffffff', + lineHeight: 22, + fontFamily: 'Fjalla-One', + top: 175, + alignSelf: 'center', + transform: [{ scaleX: 1 / 2 }], + height: 30, + textAlignVertical: 'center', + }, + back: { + position: 'absolute', + top: 172.5, + left: 70, + /* alignSelf: 'center', */ + transform: [{ scaleX: 1 / 2 }], + }, }); -export default styles; \ No newline at end of file +export default styles; diff --git a/mobile/src/components/notification/index.js b/mobile/src/components/notification/index.js new file mode 100644 index 0000000..c9e8add --- /dev/null +++ b/mobile/src/components/notification/index.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { View, Text } from 'react-native'; +import Icon from 'react-native-vector-icons/EvilIcons'; + +import styles from './styles'; + +const Description = (type, name) => { + switch (type) { + case 'NOTIFICATION_MESSAGE': + return ({`${name} te enviou uma mensangem`}); + case 'NOTIFICATION_PROJECT_ACCEPTED': + return ({`${name} te aceitou no projeto`}); + case 'NOTIFICATION_PROJECT_REQUEST': + return ({`${name} pediu para fazer parte do seu projeto`}); + case 'NOTIFICATION_PROJECT_INVITE': + return ({`${name} pediu para fazer parte deste projeto`}); + default: + return null; + } +}; + +const Notification = ({ name, type }) => ( + + + {name} + {Description(type, name)} + + + +); + +export default Notification; diff --git a/mobile/src/components/notification/styles.js b/mobile/src/components/notification/styles.js new file mode 100644 index 0000000..99982c8 --- /dev/null +++ b/mobile/src/components/notification/styles.js @@ -0,0 +1,32 @@ +import { StyleSheet } from 'react-native'; + +const styles = StyleSheet.create({ + card: { + backgroundColor: '#ffffff', + height: 85, + width: 300, + borderRadius: 8, + margin: 10, + justifyContent: 'space-between', + alignItems: 'center', + flexDirection: 'row', + }, + name: { + fontFamily: 'Fjalla-One', + fontSize: 14, + marginVertical: 5, + marginLeft: 65, + }, + quit: { + padding: 30, + }, + description: { + fontFamily: 'Fjalla-One', + fontSize: 12, + color: '#888888', + marginLeft: 65, + width: 150, + }, +}); + +export default styles; diff --git a/mobile/src/pages/Main/index.js b/mobile/src/pages/Main/index.js index e7464ff..069e1d3 100644 --- a/mobile/src/pages/Main/index.js +++ b/mobile/src/pages/Main/index.js @@ -1,45 +1,45 @@ import React, { useState } from 'react'; import { View, Text, FlatList } from 'react-native'; import { LinearGradient } from 'expo-linear-gradient'; -import { Button, Input } from 'react-native-elements'; -import Icon from 'react-native-vector-icons/Ionicons'; +import { Button } from 'react-native-elements'; import Project from '../../components/projectCard'; import Header from '../../components/Header'; import SearchBar from '../../components/searchBar'; import styles from './styles'; -function Main() { +const Main = ({ navigation }) => { + const [searchText, changeSearchText] = useState(''); - var [searchText, changeSearchText] = useState(''); - - var mock = [ + let mock = [ { projectName: 'Plataforma educacional gamificada', ownerName: 'Jason Fried', avatar: '../../../assets/icon.png', - labels: ['Rails', 'Ruby on Rails'] + labels: ['Rails', 'Ruby on Rails'], }, { projectName: 'App de academia gamificado', ownerName: 'Henri Charriere', avatar: '../../../assets/icon.png', - labels: ['Javascript', 'React Native'] + labels: ['Javascript', 'React Native'], }, { projectName: 'Chatbot de monitoramento ', ownerName: 'Stephen King', avatar: '../../../assets/icon.png', - labels: ['Rasa', 'Python'] - } + labels: ['Rasa', 'Python'], + }, ]; - mock = mock.filter(project => {return project.projectName.toLowerCase().includes(searchText.toLowerCase())}); + mock = mock.filter((project) => project.projectName.toLowerCase() + .includes(searchText.toLowerCase())); return ( -
- + @@ -48,15 +48,15 @@ function Main() { index.toString()} data={mock} - renderItem={(project) => ()} + renderItem={(project) => ()} style={styles.projectList} showsVerticalScrollIndicator={false} /> -