From 08b19113b1c86897beb90084060374dd36271800 Mon Sep 17 00:00:00 2001
From: Kenneth Darragh <kdarragh2@wisc.edu>
Date: Fri, 29 Mar 2019 18:02:06 -0500
Subject: [PATCH] UI for MetricsHabitPreview

UI for MetricsHabitPreview component, with hardcoded habit names and streaks
---
 components/MetricsHabitPreview.js | 47 +++++++++++++++++++++++++++++++
 screens/MetricsHomeScreen.js      | 19 +++++++++++--
 2 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 components/MetricsHabitPreview.js

diff --git a/components/MetricsHabitPreview.js b/components/MetricsHabitPreview.js
new file mode 100644
index 00000000..eba5cce3
--- /dev/null
+++ b/components/MetricsHabitPreview.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native'
+
+export default class MetricsHabitPreview extends React.Component {
+    render() {
+        return (
+                <View style = {styles.container}>
+                    <Text style={styles.habitText}>{this.props.habitName}</Text>
+                    <View style={styles.streakContainer}>
+                        <Text style={styles.streakText}>{this.props.streak}</Text>
+                        <Text>in a row!</Text>
+                    </View>
+                </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+  
+    container: {
+        height: 50,
+        width: 300,
+        backgroundColor: 'lightgray',
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        borderColor: 'black',
+        borderWidth: 2,
+        marginBottom: 10
+    }, 
+    streakContainer: {
+        height: 45,
+        width: 100,
+        backgroundColor: 'white',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'center'
+    },
+    habitText: {
+        fontWeight: 'bold',
+        fontSize: 30
+    },
+    streakText: {
+        fontWeight: 'bold',
+        fontSize: 20
+    }
+})
\ No newline at end of file
diff --git a/screens/MetricsHomeScreen.js b/screens/MetricsHomeScreen.js
index e9ea25bd..7e30fed0 100644
--- a/screens/MetricsHomeScreen.js
+++ b/screens/MetricsHomeScreen.js
@@ -5,6 +5,7 @@ import {
     StyleSheet
 } from 'react-native'
 import { connect } from 'react-redux';
+import MetricsHabitPreview from '../components/MetricsHabitPreview';
 
 const mapStateToProps = (state) => {
     return {
@@ -21,8 +22,13 @@ const mapDispatchToProps = (dispatch) => {
 class MetricsHomeScreen extends React.Component {
     render() {
         return (
-            <View style={styles.container}>
-                <Text> Metrics Home Screen </Text>
+            <View style = {styles.container}>
+                <Text>Metrics Home Screen</Text>
+                <View style = {styles.previews}>
+                    <MetricsHabitPreview habitName='Habit' streak='18'/>
+                    <MetricsHabitPreview habitName='Habit2' streak='14'/>
+                    <MetricsHabitPreview habitName='Habit3' streak='12'/>
+                </View>
             </View>
         )
     }
@@ -32,7 +38,14 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         alignItems: 'center',
-        justifyContent: 'center'
+        justifyContent: 'center',
+    },
+    previews: {
+        flex: 1,
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 30
     }
 })