1import { ArrowRightIcon, ArrowUpRightIcon } from '@expo/styleguide-icons'; 2import type { AnchorHTMLAttributes, ComponentType, ReactNode } from 'react'; 3 4import { A, DEMI, P } from '~/ui/components/Text'; 5 6type BoxLinkProps = AnchorHTMLAttributes<HTMLLinkElement> & { 7 title: string; 8 description: ReactNode; 9 testID?: string; 10 Icon?: ComponentType<any>; 11}; 12 13export function BoxLink({ title, description, href, testID, Icon }: BoxLinkProps) { 14 const isExternal = Boolean(href && href.startsWith('http')); 15 const ArrowIcon = isExternal ? ArrowUpRightIcon : ArrowRightIcon; 16 return ( 17 <A 18 href={href} 19 className="flex flex-row justify-between border border-solid border-default rounded-md py-3 px-4 mb-3 hocus:shadow-xs" 20 data-testid={testID} 21 openInNewTab={isExternal} 22 isStyled> 23 <div className="flex flex-row gap-4"> 24 {Icon && ( 25 <div className="flex bg-element rounded-md self-center items-center justify-center min-w-[36px] h-9"> 26 <Icon className="icon-lg text-icon-default" /> 27 </div> 28 )} 29 <div> 30 <DEMI>{title}</DEMI> 31 <P>{description}</P> 32 </div> 33 </div> 34 <ArrowIcon className="text-icon-secondary self-center content-end ml-3 min-w-[20px]" /> 35 </A> 36 ); 37} 38