File Manager

📁 Media Files

📁 .. (Parent Directory) 📁 breadcrumbs/ 📁 content-analysis/ 📁 google-indexing/ 📁 instant-indexing/ 📁 link-manager/ 📁 link-suggestion/ 📁 role-manager/ 📁 site-seo-checks/ 📁 utils/ ⚡ content-analysis-table.js ⚡ content-performance-dummy.js ⚡ content-performance-empty-state.js ⚡ content-performance.js ⚡ dashboard-constants.js ⚡ dashboard-widgets.js ⚡ dashboard.js ⚡ empty-content-gap.js ⚡ index.js ⚡ not-found.js ⚡ plugin-card.js ⚡ quick-link.js ⚡ quick-links-section.js ⚡ recommended-plugins.js ⚡ render-content.js ⚡ search-console-notice.js ⚡ search-console-popup.js ⚡ section.js ⚡ site-search-dummy.js ⚡ site-search-traffic.js ⚡ site-selector-popup-content.js ⚡ site-selector-popup.js ⚡ site-selector.js ⚡ upgrade-to-pro.js ⚡ use-plugins-and-themes.js ⚡ use-site-verification-status.js ⚡ welcome-card.js

⬆️ Upload Files

📁 Create Folder

📄 Create File

💻 Terminal

📦 Extract Archive

⚡ Edit: search-console-notice.js

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

import { Button, Text } from '@bsf/force-ui';
import { __ } from '@wordpress/i18n';
import { cn } from '@/functions/utils';

/**
 * Component to display a notice when Google Search Console is not connected
 *
 * @param {Object} props           Component props
 * @param {string} props.className Additional classes for the component
 * @return {JSX.Element} Search console notice component
 */
const SearchConsoleNotice = ( { className = '' } ) => {
	return (
		<div
			className={ cn(
				'bg-brand-background-50 border border-solid border-brand-border-300 rounded-lg shadow-soft-shadow-md flex items-center p-4',
				className
			) }
		>
			<div className="flex items-center gap-3 flex-1">
				<div className="flex-shrink-0">
					<img
						src={ `${ surerank_globals.admin_assets_url }/images/google-search-console-icon.svg` }
						alt={ __( 'Google Search Console icon', 'surerank' ) }
						width="46"
						height="42"
					/>
				</div>
				<div className="flex flex-col gap-0.5 flex-1">
					<Text as="h3" size={ 16 } weight={ 600 } color="primary">
						{ __(
							'Google Search Console Not Connected',
							'surerank'
						) }
					</Text>
					<Text size={ 14 } weight={ 400 } color="primary">
						{ __(
							'Connecting your Google Search Console account provides valuable insights into keyword performance, indexing status, and search visibility.',
							'surerank'
						) }
					</Text>
				</div>
			</div>
			<Button
				className="p-1.5"
				size="md"
				onClick={ () => {
					window.open(
						surerank_admin_common.auth_url,
						'_self',
						'noopener,noreferrer'
					);
				} }
			>
				{ __( 'Connect Now', 'surerank' ) }
			</Button>
		</div>
	);
};

export default SearchConsoleNotice;

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

📥 Download

File manager