46 lines
860 B
JavaScript
46 lines
860 B
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { Button } from '@wordpress/components';
|
|
import classnames from 'classnames';
|
|
|
|
export const Tab = ( {
|
|
icon,
|
|
title,
|
|
name,
|
|
unread,
|
|
selected,
|
|
isPanelOpen,
|
|
onTabClick,
|
|
} ) => {
|
|
const className = classnames( 'woocommerce-layout__activity-panel-tab', {
|
|
'is-active': isPanelOpen && selected,
|
|
'has-unread': unread,
|
|
} );
|
|
|
|
const tabKey = `activity-panel-tab-${ name }`;
|
|
|
|
return (
|
|
<Button
|
|
role="tab"
|
|
className={ className }
|
|
aria-selected={ selected }
|
|
aria-controls={ `activity-panel-${ name }` }
|
|
key={ tabKey }
|
|
id={ tabKey }
|
|
onClick={ () => {
|
|
onTabClick( name );
|
|
} }
|
|
>
|
|
{ icon }
|
|
{ title }{ ' ' }
|
|
{ unread && (
|
|
<span className="screen-reader-text">
|
|
{ __( 'unread activity', 'woocommerce' ) }
|
|
</span>
|
|
) }
|
|
</Button>
|
|
);
|
|
};
|