{"size": 2076, "ext": "js", "max_stars_repo_path": "src/components/charts/ChartHeading.js", "max_stars_repo_name": "n07734/community-health", "max_stars_repo_stars_event_min_datetime": "2020-12-21T10:09:13.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-18T21:06:33.000Z", "max_issues_repo_path": "src/components/charts/ChartHeading.js", "max_issues_repo_name": "n07734/community-health", "max_issues_repo_issues_event_min_datetime": "2021-01-09T09:16:31.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-20T16:03:05.000Z", "max_forks_repo_path": "src/components/charts/ChartHeading.js", "max_forks_repo_name": "n07734/community-health", "max_forks_repo_forks_event_min_datetime": "2021-01-08T21:37:54.000Z", "max_forks_repo_forks_event_max_datetime": "2021-01-08T21:37:54.000Z"}
{"max_stars_count": 7, "max_issues_count": 16, "max_forks_count": 1, "avg_line_length": 25.3170731707, "max_line_length": 80, "alphanum_fraction": 0.3410404624}
import React, { Fragment } from 'react'
import { makeStyles } from '@material-ui/core/styles'

import { H } from '../shared/StyledTags'

const ChartHeading = ({ className, items = [], text = '', type = '' } = {}) => {
    const prepend = (i) => {
        const maxIndex = items.length - 1

        return [
            i === 0
            && (() => ''),
            i === maxIndex
            && (() => ' and '),
            i > 0
            && (() => ', '),
        ].find(Boolean)()
    }

    const useStyles = makeStyles(theme => ({
        root: props => ({
            color: props.color,
            borderBottom: `solid 2px ${props.color}`,
            display: 'inline-block',
            lineHeight: '2rem',
            position: 'relative',
            '&:before': {
                lineHeight: '0',
                content: '"•"',
                position: 'absolute',
                bottom: '-1px',
                left: '-3px',
            },
            '&:after': {
                lineHeight: '0',
                content: '"•"',
                position: 'absolute',
                bottom: '-1px',
                right: '-3px',
            }
        }),
    }))

    const LineItem = ({ color, label}) => {
        const classes = useStyles({ color });
        return (
            <span
                className={classes.root}
            >
                {label}
            </span>
        )
    }

    const Item = ({ color, label}) => (
        <span
            style={{ color }}
        >
            {label}
        </span>
    )

    return (
        <H level={3} className={className}>
            {text}
            {
                items
                    .map((item, i) => <Fragment key={i}>
                        {prepend(i)}
                        {
                            type === 'line'
                                ? <LineItem {...item} />
                                : <Item {...item} />
                        }
                        </Fragment>)
            }
        </H>
    )
}

export default ChartHeading
