{"size": 535, "ext": "js", "max_stars_repo_path": "src/components/Content.js", "max_stars_repo_name": "kenfeliciano/koamar.com", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Content.js", "max_issues_repo_name": "kenfeliciano/koamar.com", "max_issues_repo_issues_event_min_datetime": "2020-12-12T07:55:25.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-28T23:14:54.000Z", "max_forks_repo_path": "src/components/Content.js", "max_forks_repo_name": "kenfeliciano/koamar.com", "max_forks_repo_forks_event_min_datetime": "2020-12-13T17:10:33.000Z", "max_forks_repo_forks_event_max_datetime": "2020-12-13T17:10:33.000Z"}
{"max_stars_count": null, "max_issues_count": 14, "max_forks_count": 1, "avg_line_length": 25.4761904762, "max_line_length": 64, "alphanum_fraction": 0.6654205607}
import * as React from 'react'
import { useContext } from 'react'
import tw, { styled } from 'twin.macro'

import { MenuContext } from '../components'

const ContentWrapper = styled.div(({ menuOpen, menuShift }) => [
  tw`p-4 mx-4 mt-6 bg-container rounded-lg shadow-lg`,
  menuOpen && menuShift && tw`mt-40`,
])

export const Content = ({ menuShift, children }) => {
  const { menuOpen } = useContext(MenuContext)

  return (
    <ContentWrapper menuOpen={menuOpen} menuShift={menuShift}>
      {children}
    </ContentWrapper>
  )
}
