zeichen-legacy/src/components/PrimaryNavItem/PrimaryNavItem.tsx

import * as React from 'react'
import * as PropTypes from 'prop-types'
import Link from 'next/link'
import styled from 'styled-components'
import Icon from '../Icon/Icon'

const Base = styled('a')({
  width: '4rem',
  height: '4rem',
  display: 'grid',
  placeContent: 'center',
  color: 'inherit',
})

const MobileBase = styled(Base)({
  '@media (min-width: 1080px)': {
    display: 'none',
  },
})

const propTypes = {
  href: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
  iconName: PropTypes.string.isRequired,
  title: PropTypes.string,
  mobileOnly: PropTypes.bool,
  active: PropTypes.bool,
}

type Props = PropTypes.InferProps<typeof propTypes>

const PrimaryNavItem: React.FC<Props> = ({
  href,
  iconName,
  title,
  mobileOnly = false,
  active = false,
}) => {
  const BaseComponent = mobileOnly ? MobileBase : Base
  return (
    <Link
      href={href}
      passHref
    >
      <BaseComponent
        title={title}
      >
        <Icon
          name={iconName}
        />
      </BaseComponent>
    </Link>
  )
}

PrimaryNavItem.propTypes = propTypes

export default PrimaryNavItem