import React from 'react'
import Link from 'gatsby-link'
import { Text } from './Layout'
import Icon from './Icon'

const ArrowLink = ({ dest, text, external, ...props }) => {
  return external ? (
    <a href={dest}>
      <Text
        fontFamily="monospace"
        display="inline-flex"
        color="black"
        hover={{ color: 'orange' }}
        fontSize={[0, 1]}
        {...props}
      >
        {text} <Icon glyph="arrow" />
      </Text>
    </a>
  ) : (
    <Link to={dest}>
      <Text
        fontFamily="monospace"
        display="inline-flex"
        align="center"
        color="black"
        hover={{ color: 'orange' }}
        fontSize={[0, 1]}
        {...props}
      >
        {text} <Icon glyph="arrow" />
      </Text>
    </Link>
  )
}

export default ArrowLink

import React from 'react'
import Link from 'gatsby-link'
import { Text } from './Layout'
import Icon from './Icon'

const ArrowLink = ({ dest, text, external, ...props }) => {
  return external ? (
    <a href={dest}>
      <Text
        fontFamily="monospace"
        display="inline-flex"
        align="center"
        color="black"
        hover={{ color: 'orange' }}
        fontSize={[0, 1]}
        {...props}
      >
        {text} <Icon glyph="arrow" />
      </Text>
    </a>
  ) : (
    <Link to={dest}>
      <Text
        fontFamily="monospace"
        display="inline-flex"
        align="center"
        color="black"
        hover={{ color: 'orange' }}
        fontSize={[0, 1]}
        {...props}
      >
        {text} <Icon glyph="arrow" />
      </Text>
    </Link>
  )
}

export default ArrowLink

add alignment to external arrow links