@eureca/eureca-ui/src/components/ProfileStrength/index.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';

import { Typography, Box } from '@material-ui/core';
import { Flex } from '../Flex';

import { colors } from '../../theme/colors';

const userMessage = [
  'Por enquanto, você só consegue visualizar vagas e oportunidades.',
  'Por enquanto, você só consegue visualizar vagas e oportunidades. Complete seu perfil para conseguir se inscrever.',
  'Por enquanto, você só consegue visualizar vagas e oportunidades. Complete seu perfil para conseguir se inscrever e para te conhecermos melhor!',
  'Seu perfil está parcialmente preenchido, já é possível explorar oportunidades!',
  'Já é possível explorar oportunidades, mas seu perfil permanece parcialmente preenchido',
  'Seu perfil está praticamente completo, estamos próximos em conhecer verdadeiramente você o/',
  'Perfil completo 🎉   Lembre-se: Sempre que fizer algum curso novo ou viver alguma experiência marcante, conte pra gente aqui no perfil!',
];

const color = [
  colors['color-c81717'],
  colors['color-c81717'],
  colors['color-c81717'],
  colors.color3,
  colors.color3,
  colors.color4,
  colors.color4,
];

function ProfileStrength({ value, messages, ...props }) {
  return (
    <Box {...props}>
      <Typography variant="subtitle1">Força do seu perfil</Typography>
      <Box py={[1, 2]}>
        <Flex directionRow>
          {Array.from({ length: 7 }, (_val, index) => (
            <Box
              data-testid="pill-testid"
              width={1}
              height={12}
              borderRadius={4}
              mr={[1, 2]}
              key={`strenth-pill-${index}`}
              bgcolor={index < value ? color[value - 1] : colors.gray4}
            />
          ))}
        </Flex>
      </Box>
      <Typography variant="subtitle2">
        {messages ? messages[value - 1] : userMessage[value - 1]}
      </Typography>
    </Box>
  );
}

ProfileStrength.propTypes = {
  value: PropTypes.number.isRequired,
  messages: PropTypes.arrayOf(PropTypes.string),
};

ProfileStrength.defaultProps = {
  value: 1,
  messages: null,
};

export { ProfileStrength };