import { UiText } from '@ory/kratos-client' ; import { Alert , AlertContent } from '@ory/themes' ; interface MessageProps { message : UiText ; } export const Message = ( { message } ) => { return ( < Alert severity = { message . type === 'error' ? 'error' : 'info' } > < AlertContent data - testid = { `ui/message/${ message . id }` } > { message . text } < /AlertContent> < /Alert>); } ; interface MessagesProps { messages ? : Array < UiText > ; } export const Messages = ( { messages } ) => { if ( ! messages ) { return null ; } return ( < div > { messages . map ( ( message ) => ( < Message key = { message . id } message = { message } / > ) ) } < /div>); } ;