2021-02-01 06:36:14 +01:00
|
|
|
import React from 'react';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
|
2021-02-07 04:38:58 +01:00
|
|
|
import { StatusState } from '../../utils/input-statuses';
|
2021-02-01 06:36:14 +01:00
|
|
|
|
2021-02-01 09:36:27 +01:00
|
|
|
interface FormStatusIndicatorProps {
|
2021-02-01 06:36:14 +01:00
|
|
|
status: StatusState;
|
|
|
|
}
|
2021-02-01 09:36:27 +01:00
|
|
|
export default function FormStatusIndicator({ status }: FormStatusIndicatorProps) {
|
2021-02-01 06:36:14 +01:00
|
|
|
const { type, icon, message } = status || {};
|
|
|
|
const classes = classNames({
|
|
|
|
'status-container': true,
|
|
|
|
[`status-${type}`]: type,
|
|
|
|
empty: !message,
|
|
|
|
});
|
|
|
|
return (
|
2021-02-21 00:14:50 +01:00
|
|
|
<span className={classes}>
|
2021-02-01 06:36:14 +01:00
|
|
|
{icon ? <span className="status-icon">{icon}</span> : null}
|
|
|
|
{message ? <span className="status-message">{message}</span> : null}
|
2021-02-21 00:14:50 +01:00
|
|
|
</span>
|
2021-02-01 06:36:14 +01:00
|
|
|
);
|
|
|
|
}
|