PayItem

<PayItem
  title="Title"
  subTitle="Subtitle"
  value="Value"
  valueSubtext="valueSubtext"
/>
<StackSpacer size="large" />
<Card title="Pay Items" padding="none">
  <FlatList
    data={[
      {
        icon: 'event',
        iconColor: colors.selected.dark,
        title: 'Annual leave',
        subTitle: 'Salary',
        value: '32 hours',
        valueSubtext: '@ 0.08333 per day',
      },
      {
        icon: 'faceRecognition',
        iconColor: colors.selected.dark,
        title: 'Personal leave',
        subTitle: '2x',
        value: '8 hours',
        valueSubtext: '@ 0.08333 per day',
      },
      {
        iconColor: colors.highlighted.dark,
        title: 'Base salary',
        value: '$1,200.00',
      },
      {
        icon: 'event',
        iconColor: colors.hero.dark,
        title: 'Weekend',
        value: '$250.00',
      },
    ]}
    renderItem={({ item }) => <PayItem {...item} />}
    keyExtractor={item => item.key}
  />
</Card>