import React from 'react' ; import { Link , LinkColor } from '../Link' ; import * as styles from './ArrowLink.css' ; import { Icon } from '../../Icon/Icon' ; import { Box } from '../../Box/Box' ; import { Text } from '../../Text/Text' ; interface ArrowLinkProps { href ? : string ; as ? : string ; color ? : LinkColor ; arrowHeight ? : number ; onClick ? : ( ) => void ; } export const ArrowLink = ( { href , as , children , color = 'blue400' , arrowHeight = 12 , onClick , } ) => ( < Box component = { href ? Link : 'div' } href = { href } as = { as } color = { color } className = { styles . root } onClick = { onClick } > < Text variant = "eyebrow" color = { color } > { children } < span className = { styles . iconWrap } > < Icon type = "arrowRight" height = { arrowHeight } color = "currentColor" / > < /span> < /Text> < /Box>);