{"size": 1053, "ext": "js", "max_stars_repo_path": "src/libraries/grommet/TextAlign.js", "max_stars_repo_name": "TheTechCompany/grommet-designer", "max_stars_repo_stars_event_min_datetime": "2019-05-21T17:05:43.000Z", "max_stars_repo_stars_event_max_datetime": "2021-12-03T21:58:22.000Z", "max_issues_repo_path": "src/libraries/grommet/TextAlign.js", "max_issues_repo_name": "TheTechCompany/grommet-designer", "max_issues_repo_issues_event_min_datetime": "2019-05-21T18:09:48.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-24T15:01:06.000Z", "max_forks_repo_path": "src/libraries/grommet/TextAlign.js", "max_forks_repo_name": "TheTechCompany/grommet-designer", "max_forks_repo_forks_event_min_datetime": "2019-05-21T18:03:28.000Z", "max_forks_repo_forks_event_max_datetime": "2021-09-11T20:50:06.000Z"}
{"max_stars_count": 36, "max_issues_count": 83, "max_forks_count": 15, "avg_line_length": 28.4594594595, "max_line_length": 70, "alphanum_fraction": 0.5251661918}
import React from 'react';
import { Box, Text } from 'grommet';
import InlineOptions from './InlineOptions';
import InlineOption from './InlineOption';

const options = ['start', 'center', 'end'];

const TextAlign = props => {
  return (
    <InlineOptions name={props.name} options={options} {...props}>
      {(option, { checked, hover }) => {
        const pad = {};
        const { label, value } = option;
        if (value === 'start') pad.right = 'small';
        else if (value === 'center') pad.horizontal = 'xsmall';
        else if (value === 'end') pad.left = 'small';
        return (
          <InlineOption checked={checked} hover={hover} label={label}>
            <Box pad={pad} border="vertical">
              <Text
                weight={checked ? 'bold' : undefined}
                color={checked ? 'selected-text' : 'border'}
              >
                a
              </Text>
            </Box>
          </InlineOption>
        );
      }}
    </InlineOptions>
  );
};

TextAlign.inline = true;

export default TextAlign;
