{"size": 543, "ext": "js", "max_stars_repo_path": "components/inventory/building-emissions.js", "max_stars_repo_name": "lachlanjc/centresustains", "max_stars_repo_stars_event_min_datetime": "2021-01-28T00:56:35.000Z", "max_stars_repo_stars_event_max_datetime": "2021-03-07T03:14:22.000Z", "max_issues_repo_path": "components/inventory/building-emissions.js", "max_issues_repo_name": "lachlanjc/centresustains", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "components/inventory/building-emissions.js", "max_forks_repo_name": "lachlanjc/centresustains", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 14.2894736842, "max_line_length": 36, "alphanum_fraction": 0.4696132597}
import { Box, Flex } from 'theme-ui'

const bar = {
  py: 1,
  px: 2,
  borderRadius: 'default',
  alignItems: 'center',
  fontWeight: 'bold',
  bg: 'indigo',
  color: 'white'
}

const BuildingEmissions = () => (
  <Box>
    <Flex
      sx={{
        ...bar,
        maxWidth: 200,
        mt: 2,
        mb: 1
      }}
    >
      52% residential
    </Flex>
    <Flex
      sx={{
        ...bar,
        maxWidth: 200 * 0.92,
        opacity: 0.75
      }}
    >
      48% commercial
    </Flex>
  </Box>
)

export default BuildingEmissions
