File Manager

📁 Media Files

📁 .. (Parent Directory) 📁 hoc/ 📁 layout/ 📁 schema-utils/ ⚡ character-limit-status.js ⚡ confirmation-dialog.js ⚡ dashboard-breadcrumb.js ⚡ error-boundary.js ⚡ global-remove-image-button.js ⚡ global-save-button.js ⚡ global-search.js ⚡ icon-badge.js ⚡ improve-with-ai-button.js ⚡ loading-skeleton.js ⚡ logo.js ⚡ media-preview.js ⚡ modal-wrapper.js ⚡ not-allowed.js ⚡ page-check-status-indicator.js ⚡ page-content-wrapper.js ⚡ page-header.js ⚡ preview-input-with-suffix.js ⚡ sidebar-skeleton.js ⚡ social-preview.js ⚡ tabs.js ⚡ tanstack-router-dev-tools.js ⚡ tooltip.js ⚡ upgrade-cta-alert.js ⚡ user-dropdown.js ⚡ version-badge.js

⬆️ Upload Files

📁 Create Folder

📄 Create File

💻 Terminal

📦 Extract Archive

⚡ Edit: page-header.js

Size: 2.14 KB | Modified: 2026-04-21 02:50:19

import { Container, Text, Title } from '@bsf/force-ui';
import { useSelect } from '@wordpress/data';
import { STORE_NAME } from '@AdminStore/constants';
import { InfoTooltip } from './tooltip';
import { useCallback, useEffect, isValidElement } from '@wordpress/element';

const hasUnsavedSettings = Object.keys( unsavedSettings || {} ).length > 0;

// Handle navigation warning for unsaved changes
	const handleBeforeUnload = useCallback(
		( event ) => {
			event.preventDefault();
			event.returnValue = '';
		},
		[ unsavedSettings ]
	);

useEffect( () => {
		if ( ! hasUnsavedSettings ) {
			return;
		}
		window.addEventListener( 'beforeunload', handleBeforeUnload );
		return () => {
			window.removeEventListener( 'beforeunload', handleBeforeUnload );
		};
	}, [ handleBeforeUnload, hasUnsavedSettings ] );

return (
		<Container direction="column" className="gap-3">
			<div className="flex items-center justify-between gap-3 flex-1">
				<Container direction="column" className="gap-0.5">
					<Container direction="row" className="gap-2">
						<Title
							className="[&_h2]:text-text-primary [&_h2]:leading-[1.875rem]"
							title={ title }
							icon={
								!! Icon && (
									<Icon className="size-5 text-text-primary" />
								)
							}
							iconPosition="left"
							size="md"
						/>
						{ /* Added the InfoTooltip next to the Title */ }
						{ info_tooltip && (
							<div className="mt-[7px]">
								<InfoTooltip
									content={ info_tooltip }
									interactive={ true }
								/>
							</div>
						) }
					</Container>
					<Text size={ 14 } weight={ 400 } color="secondary">
						{ description }
					</Text>
				</Container>

{ !! secondaryButton && secondaryButton }
			</div>
			{ isValidElement( afterDescription ) && afterDescription }
		</Container>
	);
};

export default PageHeader;

Supports: PHP, ASPX, HTML, JavaScript, CSS and other text-based files

📥 Download

File manager