Components styles

wendreof · Jul 2, 2019 · 6f6fdeb · 6f6fdeb
1 parent edb7ddf
commit 6f6fdeb
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 6 deletions.
diff --git a/src/components/Repository/index.js b/src/components/Repository/index.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+ import {
+   Container, Name , Description, Stats, Stat, StatCount
+ } from './styles';
+
+export default function Repository({data}) {
+  return (
+    <Container>
+      <Name>{data.name}</Name>
+      <Description>{data.description}</Description>
+      <Stats>
+      <Stat>
+        <Icon name="star" size={16} color="#333"/>
+        <StatCount>{data.stars}</StatCount>
+      </Stat>
+        <Icon name="code-fork" size={16} color="#333"/>
+        <StatCount>{data.forks}</StatCount>
+      </Stats>
+    </Container>
+  );
+}
diff --git a/src/components/Repository/styles.js b/src/components/Repository/styles.js
@@ -0,0 +1,35 @@
+import styled from 'styled-components/native';
+
+export const Container = styled.View`
+  padding: 20px;
+  border-radius: 4px;
+  background: #FFF;
+  margin-bottom: 15px;
+`;
+
+export const Name = styled.Text`
+  font-size: 18px;
+ font-weight: bold;
+ color: #333;
+`;
+
+export const Description = styled.Text.attrs({
+  numberOfLines:2,
+})`
+  color: #666;
+  margin-top: 5px;
+  line-height: 20px;
+`;
+export const Stats = styled.View`
+  flex-direction: row;
+  margin-top: 15px
+`;
+
+export const Stat = styled.View`
+    flex-direction: row;
+    align-items: center;
+    margin-right: 10px
+`;
+export const StatCount = styled.Text`
+  margin-left: 6px;
+`;
diff --git a/src/index.js b/src/index.js
@@ -1,9 +1,17 @@
 import React from 'react';
+import {StatusBar } from 'react-native'
 
 import '~/config/ReactotronConfig';
 
 import Routes from '~/routes';
 
-const App = () => <Routes />;
+const App = () => (
+  <>
+    <StatusBar backgroundColor="transparent"
+               translucent
+               barStyle="light-content"/>
+  <Routes />
+    </>
+);
 
 export default App;
diff --git a/src/pages/Main/index.js b/src/pages/Main/index.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import Icon from 'react-native-vector-icons/MaterialIcons';
+import Repository from '~/components/Repository';
 import {
-  Container, Form, Input, Submit, Title
+  Container, Form, Input, Submit, Title, List
 } from './styles';
 
 export default function Main() {
@@ -18,6 +19,23 @@ export default function Main() {
 <Icon name="add" size={22} color="#FFF" />
       </Submit>
       </Form>
+
+      <List
+        keyboardShouldPersistTaps="handled"
+        data={[
+          {
+            id: 1,
+            name: 'wendreof',
+            description: 'wendreof repository',
+            stars: 1234,
+            forks: 199,
+          },
+        ]}
+        KeyExtractpr={item => String(item.id)}
+        renderItem={({item}) => (
+        <Repository data={item}/>
+        )}
+        />
     </Container>
   );
 }
diff --git a/src/pages/Main/styles.js b/src/pages/Main/styles.js
@@ -1,15 +1,50 @@
 import styled from 'styled-components/native';
 import LinearGradient from 'react-native-linear-gradient';
+import { getStatusBarHeight } from 'react-native-status-bar-height';
 
 export const Container = styled(LinearGradient).attrs({
   colors: ['#7159c1', '#9b59c1'],
   start: {x: 0, y: 0},
   end: {x:1, y: 1},
 })`
   flex: 1;
+  padding-top: ${30 + getStatusBarHeight(true)}px;
 `;
 
-export const Title = styled.Text``;
-export const Form = styled.View``;
-export const Input = styled.TextInput``;
-export const Submit = styled.TouchableOpacity``;
+export const Title = styled.Text`
+font-size: 32px;
+color: #FFF;
+font-weight: bold;
+padding: 0 20px;
+`;
+export const Form = styled.View`
+  flex-direction: row;
+  margin-top: 10px;
+  padding: 0 20px;
+`;
+
+export const Input = styled.TextInput.attrs({
+  placeholderTextColor: '#999',
+})`
+flex: 1;
+padding: 12px 15px;
+border-radius:4px;
+font-size: 16px;
+color: #333;
+background: #fff;
+`;
+
+export const Submit = styled.TouchableOpacity`
+background: #6bd4c1;
+margin-left: 10px;
+justify-content: center;
+border-radius: 4px;
+padding: 0 14px;
+`;
+
+export const List = styled.FlatList.attrs({
+  contentContainerStyle: { paddingHorizontal: 20 },
+  showsVerticalScrollIndicator: false,
+})`
+margin-top: 20px;
+`;