{"size": 1823, "ext": "js", "max_stars_repo_path": "src/components/typography/links.js", "max_stars_repo_name": "wjastenner/gatsby_firebase_starter", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/typography/links.js", "max_issues_repo_name": "wjastenner/gatsby_firebase_starter", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/typography/links.js", "max_forks_repo_name": "wjastenner/gatsby_firebase_starter", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 20.4831460674, "max_line_length": 74, "alphanum_fraction": 0.5874931432}
import React from "react"
import { Link as GatsbyLink } from "gatsby"
import styled, { css } from "styled-components"
import { compose, color, space, typography, display } from "styled-system"
import Flex from "../boxes/flex"

const StyledGatsbyLink = styled(GatsbyLink)`
  text-decoration: ${p => p.textDecoration};
  ${compose(color, space, typography, display)}
`

const activeFlex = css`
  background-color: ${p => p.theme.colors.black};
  a {
    color: ${p => p.theme.colors.white};
  }
`

const Root = styled(Flex)`
  ${p => p.active && activeFlex};
`

const StyledA = styled.a`
  text-decoration: ${p => p.textDecoration};
  ${compose(color, space, typography, display)}
`

export const NavLink = ({ to, color, children, ...rest }) => {
  const active = () => {
    if (typeof window !== "undefined") {
      const navPaths = [to, `${to}/`]
      if (navPaths.includes(window.location.pathname)) {
        return true
      } else {
        return false
      }
    }
  }
  return (
    <Root active={active()} {...rest}>
      <StyledGatsbyLink to={to} color={color}>
        {children}
      </StyledGatsbyLink>
    </Root>
  )
}

export const Link = ({ to, color, children, ...rest }) => {
  return (
    <StyledGatsbyLink to={to} color={color}>
      {children}
    </StyledGatsbyLink>
  )
}

export const A = ({ children, action, ...rest }) => {
  return (
    <StyledA
      href="#"
      onClick={e => {
        e.preventDefault()
        action()
      }}
      {...rest}
    >
      {children}
    </StyledA>
  )
}

StyledGatsbyLink.defaultProps = {
  textDecoration: "none",
}

Root.defaultProps = {
  alignItems: "center",
  px: 4,
  display: "inline-flex",
  height: "100%",
}

A.defaultProps = {
  textDecoration: "none",
  alignItems: "center",
  px: 4,
  display: "inline-flex",
  height: "100%",
}
