Source: screens/dashboard/bank/products.js

import React from 'react';
import { StyleSheet, View } from 'react-native';

import ColoredLabel from '../../../components/ColoredLabel';

/**
 * Component used to show the users products on the dashboard.
 * Shows the number of deposits, total volume and product.
 * @param {properties} props Component properties
 * 
 * @component
 * @memberof module:Components
 * @example
 * <Products
 *  deposit={{
      product: '31 d',
      quantity: 5,
      volume: 44
    }}
 *  pKey={unique key}
 * />
 */
const Products = props => {
  const { deposit, pKey } = props;
  return (
    <View key={pKey} style={styles.wrapper}>
      <ColoredLabel
        containerStyle={styles.deposit}
        textStyle={styles.depositText}
        labelText={`${deposit.quantity} innskudd`}
      />
      <ColoredLabel
        containerStyle={styles.product}
        textStyle={styles.productText}
        labelText={deposit.product}
      />
      <ColoredLabel
        containerStyle={styles.volume}
        textStyle={styles.volumeText}
        labelText={`Tot. ${deposit.volume} mill.`}
      />
    </View>
  );
};

const primaryText = 'MuseoSansRounded-700';
const primaryTextBold = 'MuseoSansRounded-900';

const styles = StyleSheet.create({
  wrapper: {
    flexDirection: 'row',
    marginTop: 15,
    justifyContent: 'space-around'
  },
  deposit: {
    width: 100,
    backgroundColor: '#8797A0',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 5,
    borderRadius: 5
  },
  depositText: {
    textAlign: 'center',
    color: 'white',
    fontFamily: primaryText
  },
  product: {
    borderRadius: 5,
    width: 60,
    backgroundColor: '#EEEEEE',
    alignContent: 'center',
    padding: 5
  },
  productText: {
    textAlign: 'center',
    fontFamily: primaryText
  },
  volume: {
    width: 95,
    backgroundColor: '#EBFFC8',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 5,
    borderRadius: 5
  },
  volumeText: {
    textAlign: 'center',
    color: '#00894B',
    fontFamily: primaryText
  }
});

export default Products;