1import { css } from '@emotion/react'; 2import { borderRadius, spacing, theme, ArrowRightIcon, iconSize, shadows } from '@expo/styleguide'; 3import React, { PropsWithChildren, ReactNode } from 'react'; 4 5import { A, HEADLINE, P } from '~/ui/components/Text'; 6 7type BoxLinkProps = PropsWithChildren<{ 8 title: string; 9 description: string | ReactNode; 10 href?: string; 11 testID?: string; 12}>; 13 14export function BoxLink({ title, description, href, testID }: BoxLinkProps) { 15 return ( 16 <A href={href} css={tileContainerStyle} data-testid={testID}> 17 <div> 18 <HEADLINE tag="span">{title}</HEADLINE> 19 <P>{description}</P> 20 </div> 21 <ArrowRightIcon css={iconStyle} color={theme.icon.secondary} /> 22 </A> 23 ); 24} 25 26const tileContainerStyle = css({ 27 display: 'flex', 28 flexDirection: 'row', 29 justifyContent: 'space-between', 30 border: `1px solid ${theme.border.default}`, 31 borderRadius: borderRadius.medium, 32 padding: `${spacing[3]}px ${spacing[4]}px`, 33 marginBottom: spacing[3], 34 35 ':hover': { 36 boxShadow: shadows.micro, 37 }, 38}); 39 40const iconStyle = css({ 41 alignSelf: 'center', 42 alignContent: 'flex-end', 43 minWidth: iconSize.regular, 44 marginLeft: spacing[3], 45}); 46