import React from 'react';
import { List, Heading, Box, ListIcon, Li } from '@native-base/v3';

export default function () {
  return (
    <Box height="50%">
      <Heading color="indigo.5">List with Icons</Heading>
      <List mt={2} fontSize={32} spacing={4} color="red.2">
        <Li>
          <ListIcon
            name="check-circle-outline"
            color="green.4"
            type="MaterialIcons"
          />
          Server went up
        </Li>
        <Li>
          <ListIcon name="cancel" color="red.4" type="MaterialIcons" />
          Server went down
        </Li>
        <Li>
          <ListIcon name="equalizer" type="MaterialIcons" />
          Graphs and stats
        </Li>
        <Li>
          <ListIcon name="attach-file" color="gray.4" type="MaterialIcons" />
          Attachments
        </Li>
      </List>
    </Box>
  );
}