From b70b5ca7af9b21c51954be1389e056f542a5ebd2 Mon Sep 17 00:00:00 2001
From: Edin Dazdarevic <edin.dazdarevic@gmail.com>
Date: Sat, 23 Sep 2017 12:21:45 +0200
Subject: [PATCH] AnatomyCard done

---
 index.ios.js                  | 32 ++++++------------------------
 src/components/AnatomyCard.js | 37 +++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/index.ios.js b/index.ios.js
index 608c597..31ceff3 100644
--- a/index.ios.js
+++ b/index.ios.js
@@ -12,42 +12,22 @@ import {
   View
 } from 'react-native';
 
+import AnatomyCard from './src/components/AnatomyCard'
+
 export default class meme extends Component {
   render() {
     return (
       <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </Text>
+        <AnatomyCard title="Bradavica" text="O alveoli, o tkivu, o mliječnim putevima i živcima. Zamišljeno je da korisnik može fizički da istraži anatomiju i fizionomiju dojke. Zoomin/zoomout sa tagovima. U sekciji anatomije nas dočeka kao neka interaktivna infografika. Npr, dojka i njen presjek sa tagovima. Kada kliknemo na tag dobijemo karticu sa svim informacijama o alveoli. Kartice kao i sav drugi sadržaj ne bi pravila skrolabilnim, radje bi sadržaj rasporedjivala na više kartica. Ali recimo da u ovoj sekciji fiziologije bi za svaki pojam bila jedna kartica jer su to neki uopšteni pojmovi."/>
       </View>
-    );
+    )
   }
 }
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
+    flex: 1
+  }
 });
 
 AppRegistry.registerComponent('meme', () => meme);
diff --git a/src/components/AnatomyCard.js b/src/components/AnatomyCard.js
index e69de29..6478216 100644
--- a/src/components/AnatomyCard.js
+++ b/src/components/AnatomyCard.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+//import CategoryItem from './CategoryItem';
+
+const AnatomyCard = ({title, text}) => {
+  const { defaultStyle, titleStyle, textStyle } = styles;
+
+  return (
+    <View style={defaultStyle}>
+      <Text style={titleStyle}>{title}</Text>
+      <Text style={textStyle}>{text}</Text>
+    </View>
+  );
+};
+
+const styles = {
+  defaultStyle: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    backgroundColor: '#f7bcbc',
+    flex: 1
+  },
+  titleStyle: {
+    color: 'white',
+    textAlign: 'center',
+    fontSize: 24
+  },
+  textStyle: {
+    textAlign: 'center',
+    color: 'white',
+    fontSize: 16,
+    margin: 20,
+    lineHeight: 22
+  }
+};
+
+export default AnatomyCard;