woocommerce-paypal-payments/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js

import { useCallback, useLayoutEffect } from '@wordpress/element';
import { Button, Icon } from '@wordpress/components';
import { chevronLeft } from '@wordpress/icons';
import classNames from 'classnames';

import useIsScrolled from '../../hooks/useIsScrolled';
import { useNavigation } from '../../hooks/useNavigation';
import BusyStateWrapper from './BusyStateWrapper';
import TabNavigation from './TabNavigation';

const TopNavigation = ( {
	title,
	children,
	isMainTitle = true,
	exitOnTitleClick = false,
	onTitleClick = null,
	showProgressBar = false,
	progressBarPercent = 0,
	tabs,
	activePanel,
	setActivePanel,
} ) => {
	const { goToWooCommercePaymentsTab } = useNavigation();
	const { isScrolled } = useIsScrolled();

	const className = classNames( 'ppcp-r-navigation-container', {
		'ppcp--is-scrolled': isScrolled,
	} );
	const titleClassName = classNames( 'ppcp--nav-title', {
		'ppcp--big': isMainTitle,
	} );

	const handleTitleClick = useCallback( () => {
		if ( exitOnTitleClick ) {
			goToWooCommercePaymentsTab();
		} else if ( 'function' === typeof onTitleClick ) {
			onTitleClick();
		}
	}, [ exitOnTitleClick, goToWooCommercePaymentsTab, onTitleClick ] );

	// Removes the excess padding at the top of the navigation bar.
	useLayoutEffect( () => {
		window.dispatchEvent( new Event( 'resize' ) );
	}, [] );

	return (
		<div className={ className }>
			<div className="ppcp-r-navigation">
				<div className="ppcp-r-navigation--row">
					<BusyStateWrapper
						className="ppcp-r-navigation--left"
						busySpinner={ false }
						enabled={ ! exitOnTitleClick }
					>
						<Button
							variant="link"
							onClick={ handleTitleClick }
							className="is-title"
						>
							<Icon icon={ chevronLeft } />
							<span className={ titleClassName }>{ title }</span>
						</Button>
					</BusyStateWrapper>

					<BusyStateWrapper
						className="ppcp-r-navigation--right"
						busySpinner={ false }
					>
						{ children }
					</BusyStateWrapper>
				</div>
				<TabNavigation
					tabs={ tabs }
					activePanel={ activePanel }
					setActivePanel={ setActivePanel }
				></TabNavigation>

				{ showProgressBar && (
					<ProgressBar percent={ progressBarPercent } />
				) }
			</div>
		</div>
	);
};

const ProgressBar = ( { percent } ) => {
	percent = Math.min( Math.max( percent, 0 ), 100 );

	return (
		<div
			className="ppcp-r-navigation--progress-bar"
			style={ { width: `${ percent }%` } }
		/>
	);
};

export default TopNavigation;