Smart Gatsby Link

Link.tsx

import * as React from 'react'
import { Link as GatsbyLink } from 'gatsby'

// Local
import { UnstyledButton } from './UnstyledButton'

type Props = {
  /** For local gaysby routes/links */
  to?: string
  /** For external links with e.g. https://google.com outside Gatsby */
  href?: string
  children?: any
}

export const Link = ({
  to,
  href,
  children,
}: Props) => {
  const Wrapper = to ? GatsbyLink : href ? 'a' : UnstyledButton
  const props = to ? { to, ...rest } : href ? { href, ...rest } : { ...rest }

  return <Wrapper {...props}>{children}</Wrapper>
}

UnstyledButton.ts

import styled from '../style/styled'

export const unsetButton = css`
  padding: 0;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  color: inherit;
`

export const UnstyledButton = styled.button`
  ${unsetButton};
`