diff --git a/components/ui/DeckItem.js b/components/ui/DeckItem.js new file mode 100644 index 0000000..00979ea --- /dev/null +++ b/components/ui/DeckItem.js @@ -0,0 +1,77 @@ +import React, { Component } from 'react'; +import { StyleSheet, Text, View } from 'react-native'; + +import DifficultyMeter from './DifficultyMeter'; + +import { COLOR_B_1, COLOR_SUCCESS, COLOR_FAILURE } from '../../utils/colors'; + +export default class DeckItem extends Component { + + render() { + + const { deck } = this.props; + + return ( + + + + + + {deck.name} + {deck.description} + + + + {deck.won} + {deck.lost} + + + + ); + } + +} + +const styles = StyleSheet.create({ + mainContainer: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + padding: 5, + borderBottomWidth: 1, + borderBottomColor: COLOR_B_1 + }, + diffContainer: { + flex: 1, + }, + infoContainer: { + flex: 3, + padding: 5, + }, + scoreContainer: { + flex: 1, + }, + name: { + fontSize: 20, + fontWeight: 'bold' + }, + description: { + fontSize: 15, + fontStyle: 'italic', + flexWrap: 'wrap' + }, + won: { + flex: 2, + fontSize: 25, + color: '#fff', + backgroundColor: COLOR_SUCCESS, + textAlign: 'center' + }, + lost: { + flex: 2, + fontSize: 25, + color: '#fff', + backgroundColor: COLOR_FAILURE, + textAlign: 'center' + } +}); \ No newline at end of file