50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './style.scss';
|
|
|
|
const TaskListPlaceholder = ( props ) => {
|
|
const {
|
|
numTasks = 5,
|
|
} = props;
|
|
return (
|
|
<div className="woocommerce-task-dashboard__container">
|
|
<div
|
|
className="woocommerce-card woocommerce-task-card is-loading"
|
|
aria-hidden
|
|
>
|
|
<div className="woocommerce-card__header">
|
|
<div className="woocommerce-card__title-wrapper">
|
|
<div className="woocommerce-card__title woocommerce-card__header-item">
|
|
<span className="is-placeholder" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="woocommerce-card__body">
|
|
<div className="woocommerce-list">
|
|
{ Array.from( new Array( numTasks ) ).map( ( v, i ) => (
|
|
<div key={ i } className="woocommerce-list__item has-action">
|
|
<div className="woocommerce-list__item-inner">
|
|
<div className="woocommerce-list__item-before">
|
|
<span className="is-placeholder" />
|
|
</div>
|
|
<div className="woocommerce-list__item-text">
|
|
<div className="woocommerce-list__item-title">
|
|
<span className="is-placeholder" />
|
|
</div>
|
|
</div>
|
|
<div className="woocommerce-list__item-after">
|
|
<span className="is-placeholder" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) ) }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TaskListPlaceholder;
|