Created new Result component to display operation result messages consistently

src/utils/Result.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { Row } from 'reactstrap';
+import classNames from 'classnames';
+import { SimpleCard } from './SimpleCard';
+
+interface ResultProps {
+  type: 'success' | 'error' | 'warning';
+  className?: string;
+  textCentered?: boolean;
+  small?: boolean;
+}
+
+export const Result: FC<ResultProps> = ({ children, type, className, textCentered = false, small = false }) => (
+  <Row className={className}>
+    <div className={classNames({ 'col-md-10 offset-md-1': !small, 'col-12': small })}>
+      <SimpleCard
+        className={classNames({
+          'bg-main': type === 'success',
+          'bg-danger': type === 'error',
+          'bg-warning': type === 'warning',
+          'text-white': type !== 'warning',
+          'text-center': textCentered,
+        })}
+        bodyClassName={classNames({ 'p-2': small })}
+      >
+        {children}
+      </SimpleCard>
+    </div>
+  </Row>
+);

src/utils/SimpleCard.tsx

@@ -4,11 +4,12 @@ import { ReactNode } from 'react';
 
 interface SimpleCardProps extends Omit<CardProps, 'title'> {
   title?: ReactNode;
+  bodyClassName?: string;
 }
 
-export const SimpleCard = ({ title, children, ...rest }: SimpleCardProps) => (
+export const SimpleCard = ({ title, children, bodyClassName, ...rest }: SimpleCardProps) => (
   <Card {...rest}>
     {title && <CardHeader>{title}</CardHeader>}
-    <CardBody>{children}</CardBody>
+    <CardBody className={bodyClassName}>{children}</CardBody>
   </Card>
 );