notesnook/apps/mobile/src/components/ResultDialog/ProFeatures.js

import React from 'react';
import {View} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {useTracked} from '../../provider';
import {eSendEvent} from '../../services/EventManager';
import {
  eCloseProgressDialog,
  eCloseResultDialog,
  eOpenPremiumDialog
} from '../../utils/Events';
import {SIZE} from '../../utils/SizeUtils';
import {sleep} from '../../utils/TimeUtils';
import Paragraph from '../Typography/Paragraph';
export const ProFeatures = ({count = 6}) => {
  const [state, dispatch] = useTracked();
  const {colors} = state;

  return (
    <>
      {[
        {
          content:
            'Unlock unlimited notebooks, tags, colors. Organize like a pro'
        },
        {
          content:
            'Attach files upto 500MB, upload 4K images with unlimited storage'
        },
        {
          content: 'Instantly sync to unlimited devices'
        },
        {
          content: 'A private vault to keep everything imporant always locked'
        },
        {
          content:
            'Rich note editing experience with markdown, tables, checklists and more'
        },
        {
          content: 'Export your notes in Pdf, markdown and html formats'
        }
      ]
        .slice(0, count)
        .map(item => (
          <View
            style={{
              flexDirection: 'row',
              width: '100%',
              height: 40,
              paddingHorizontal: 0,
              marginBottom: 10,
              alignItems: 'center',
              borderRadius: 5,
              justifyContent: 'flex-start'
            }}>
            <Icon size={SIZE.lg} color={colors.accent} name="check" />
            <Paragraph style={{marginLeft: 5, flexShrink: 1}}>
              {item.content}
            </Paragraph>
          </View>
        ))}
      <Paragraph
        onPress={async () => {
          eSendEvent(eCloseResultDialog);
          eSendEvent(eCloseProgressDialog);
          await sleep(300);
          eSendEvent(eOpenPremiumDialog);
        }}
        size={SIZE.xs + 1}
        style={{
          textDecorationLine: 'underline',
          color: colors.icon
        }}>
        See all features included in Notesnook Pro
      </Paragraph>
    </>
  );
};