woocommerce/plugins/woocommerce-admin/client/activity-panel/tab/index.js

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>
);
};