import { memo } from 'react' ; import { Box , BoxProps , color , Stack , StackProps } from '@stacks/ui' ; import { FiAlertTriangle } from 'react-icons/fi' ; import { Caption , Text } from '@app/components/typography' ; function ErrorButton ( { variant , ... props } ) { return ( < Caption as = "button" border = { 0 } borderRadius = "12px" px = "base" py = "base" color = { color ( 'text-title' ) } bg = { variant === 'secondary' ? 'transparent' : color ( 'bg-4' ) } fontWeight = { variant === 'secondary' ? 400 : 500 } { ... props } />); } interface ErrorMessageProps extends StackProps { title : string ; body : string | JSX . Element ; actions ? : { onClick : ( ) => void ; label : string ; variant ? : 'secondary' ; } [ ] ; } export const ErrorMessage = memo ( ( { title , body , actions , ... rest } ) => { return ( < Stack mt = "loose" p = "loose" borderRadius = "12px" border = "4px solid #FCEEED" spacing = "extra-loose" color = { color ( 'feedback-error' ) } bg = { color ( 'bg' ) } { ... rest } > < Stack spacing = "base-loose" > < Stack alignItems = "center" isInline > < Box strokeWidth = { 2 } as = { FiAlertTriangle } / > < Text color = "currentColor" > { title } < /Text> < /Stack> < Caption color = { color ( 'text-body' ) } > { body } < /Caption> < /Stack> < Stack spacing = "loose" > { actions && ( < Stack isInline flexWrap = "wrap" > { actions . map ( action => ( < ErrorButton flexGrow = { 1 } borderRadius = "12px" onClick = { action . onClick } variant = { action . variant } > { action . label } < /ErrorButton>))} < /Stack>)} < ErrorButton p = { 0 } flexGrow = { 1 } borderRadius = "12px" onClick = { ( ) => window . close ( ) } variant = "secondary" > Close window < /ErrorButton> < /Stack> < /Stack>); } ) ;