Your IP : 216.73.216.171
/**
* External dependencies
*/
import React from 'react';
import classNames from 'classnames';
/**
* Internal dependencies
*/
import './style.scss';
/**
* Functional BorderFrame component.
*
* @param {Object} props Component props.
* @param {Object} props.elements
* @param {Object} props.header
* @param {Array} props.extraClasses Extra classes.
*
* @return {*} List component.
*
* @class
*/
export default function BorderFrame( { elements, header, extraClasses } ) {
const items = Object.values( elements ).map( ( element, id ) => {
return (
<div className="table-row" key={ id }>
<div className="wphb-caching-summary-item-type">
{ element.label }
</div>
{ ! window.lodash.includes( extraClasses, 'two-columns' ) && (
<div className="wphb-caching-summary-item-expiry">
{ element.expiry }
</div>
) }
<div>{ element.details }</div>
</div>
);
} );
return (
<div className={ classNames( 'wphb-border-frame', extraClasses ) }>
{ header && (
<div className="table-header">
<div className="wphb-caching-summary-heading-type">
{ header[ 0 ] }
</div>
{ ! window.lodash.includes( extraClasses, 'two-columns' ) && (
<div className="wphb-caching-summary-heading-expiry">
{ header[ 2 ] }
</div>
) }
<div className="wphb-caching-summary-heading-status">
{ header[ 1 ] }
</div>
</div>
) }
{ items }
</div>
);
}