| 1 |
/** |
| 2 |
* WordPress dependencies. |
| 3 |
*/ |
| 4 |
import { WPElement } from '@wordpress/element'; |
| 5 |
|
| 6 |
/** |
| 7 |
* Log component. |
| 8 |
* |
| 9 |
* @param {object} props Component props. |
| 10 |
* @param {object[]} props.messages Log messages. |
| 11 |
* @returns {WPElement} Component. |
| 12 |
*/ |
| 13 |
export default ({ messages }) => { |
| 14 |
return ( |
| 15 |
<div className="ep-sync-messages"> |
| 16 |
{messages.map((m, i) => ( |
| 17 |
<div |
| 18 |
className="ep-sync-messages__line-number" |
| 19 |
key={`line-${m.id}`} |
| 20 |
role="presentation" |
| 21 |
> |
| 22 |
{i + 1} |
| 23 |
</div> |
| 24 |
))} |
| 25 |
{messages.map((m) => ( |
| 26 |
<div |
| 27 |
className={`ep-sync-messages__message ep-sync-messages__message--${m.status}`} |
| 28 |
key={`message-${m.id}`} |
| 29 |
> |
| 30 |
{m.message} |
| 31 |
</div> |
| 32 |
))} |
| 33 |
</div> |
| 34 |
); |
| 35 |
}; |
| 36 |
|
