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