FM / common

/home/vianto5/duettowers.mx/wp-content/plugins/code-snippets/js/components/common/

/home/vianto5/duettowers.mx/wp-content/plugins/code-snippets/js/components/common

Name	Size	Mode	Actions
cloud/	-	0755	rm
icons/	-	0755	rm
ListTable/	-	0755	rm
snippets/	-	0755	rm
Badge.tsx	860	0644	edit dl rm
Button.tsx	929	0644	edit dl rm
ConfirmDialog.tsx	1059	0644	edit dl rm
CopyToClipboardButton.tsx	2340	0644	edit dl rm
KebabMenu.tsx	6194	0644	edit dl rm
LoadingStatusNotices.tsx	943	0644	edit dl rm
Notice.tsx	1354	0644	edit dl rm
ScreenMetaSlot.tsx	1290	0644	edit dl rm
SnippetViewToggle.tsx	1465	0644	edit dl rm
SubmitButton.tsx	982	0644	edit dl rm
SubnavTabs.tsx	2254	0644	edit dl rm
Toolbar.tsx	5211	0644	edit dl rm
Tooltip.tsx	1428	0644	edit dl rm
TooltipButton.tsx	854	0644	edit dl rm
UpsellBanner.tsx	1337	0644	edit dl rm
UpsellDialog.tsx	2420	0644	edit dl rm

Edit: /home/vianto5/duettowers.mx/wp-content/plugins/code-snippets/js/components/common/Toolbar.tsx (5211B)

export const SUBPAGES = ['snippets', 'blueprints', 'cloud-community', 'cloud-library'] as const

const searchParams = new URLSearchParams(window.location.search)

interface UpperNavItemProps {
	name: string
	url: string
	label: string
}

const UpperNavItem = ({ name, url, label }: UpperNavItemProps) => {
	const pageSlug = useMemo(() => new URL(url).searchParams.get('page'), [url])

const isActive = !searchParams.get('subpage') && searchParams.get('page') === pageSlug

return (
		<li>
			<a
				href={url}
				className={classnames(`${name}-link`, { 'active-link': isActive })}
				{...!pageSlug && { target: '_blank', rel: 'noopener noreferrer' }}
			>
				{label}
			</a>
		</li>
	)
}
const UpperNavItems = () =>
	<>
		<UpperNavItem
			name="docs"
			url="https://codesnippets.pro/docs"
			label={__('Docs', 'code-snippets')}
		/>

{window.CODE_SNIPPETS?.urls.welcome && (
			<UpperNavItem
				name="welcome"
				url={window.CODE_SNIPPETS.urls.welcome}
				label={__("What's New", 'code-snippets')}
			/>)}

{window.CODE_SNIPPETS?.urls.import && (
			<UpperNavItem
				name="import-snippets"
				url={window.CODE_SNIPPETS.urls.import}
				label={_x('Import', 'snippets', 'code-snippets')}
			/>)}

</>

const MoreNav = () =>
	<li className="toolbar-more-item">
		<details className="toolbar-more-menu">
			<summary>
				{__('More', 'code-snippets')}
				<span className="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
			</summary>
			<ul>
				<UpperNavItems />
			</ul>
		</details>
	</li>

const UpperNav: React.FC = () => {
	const [isUpsellDialogOpen, setIsUpsellDialogOpen] = useState(false)

return (
		<div className="code-snippets-toolbar-upper">
			<div className="logo">
				<img
					src={`${window.CODE_SNIPPETS?.urls.plugin}/assets/icon.svg`}
					alt={__('Code Snippets logo', 'code-snippets')}
					aria-hidden="true"
				/>

<div>{__('Code Snippets', 'code-snippets')}</div>
			</div>

{shouldShowUpsell() && (
						<li className="toolbar-upgrade-item">
							<a
								className="button button-large button-secondary"
								href="https://codesnippets.pro/pricing/"
								target="_blank" rel="noopener noreferrer"
								onClick={event => {
									event.preventDefault()
									setIsUpsellDialogOpen(true)
								}}
							>
								{__('Upgrade to Pro', 'code-snippets')}
							</a>
						</li>)}
				</ul>
			</nav>

<UpsellDialog isOpen={isUpsellDialogOpen} setIsOpen={setIsUpsellDialogOpen} />
		</div>
	)
}

interface SubpageItemProps {
	subpage: typeof SUBPAGES[number]
	label: string
	Icon: React.FC<SVGProps<SVGSVGElement>>
	isPro?: boolean
}

const SubpageItem: React.FC<SubpageItemProps> = ({ subpage, label, Icon, isPro }) =>
	<li>
		<a
			href={buildUrl(window.CODE_SNIPPETS?.urls.manage, { subpage: subpage })}
			className={classnames(`${subpage}-link`, { 'active-link': subpage === searchParams.get('subpage') })}
		>
			<Icon aria-hidden="true" />
			<span className="toolbar-nav-label">{label}</span>
			{isPro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
		</a>
	</li>

const LowerNav = () =>
	<div className="code-snippets-toolbar-lower">
		<nav aria-label={__('Main features', 'code-snippets')}>
			<ul>
				<SubpageItem
					subpage="snippets"
					label={__('Snippets', 'code-snippets')}
					Icon={SnippetsIcon}
				/>

{isLicensed() && (
					<SubpageItem
						subpage="blueprints"
						label={__('Blueprints', 'code-snippets')}
						Icon={BlueprintIcon}
					/>)}

{!isLicensed() && (
					<SubpageItem
						subpage="blueprints"
						label={__('Blueprints', 'code-snippets')}
						Icon={BlueprintIcon}
						isPro
					/>)}

{window.CODE_SNIPPETS?.urls.settings && (
					<li className="toolbar-end-item">
						<a href={window.CODE_SNIPPETS.urls.settings} className="settings-link">
							<SettingsIcon aria-hidden="true" />
							<span className="toolbar-nav-label">{__('Settings', 'code-snippets')}</span>
						</a>
					</li>)}
			</ul>
		</nav>
	</div>

export const Toolbar = () =>
	<div className="code-snippets-toolbar">
		<UpperNav />
		<LowerNav />
	</div>

import { __, _x } from '@wordpress/i18n' import classnames from 'classnames' import React, { useMemo, useState } from 'react' import { isLicensed, shouldShowUpsell } from '../../utils/screen' import { buildUrl } from '../../utils/urls' import { BlueprintIcon } from './icons/BlueprintIcon' import { CommunityIcon } from './icons/CommunityIcon' import { LibraryIcon } from './icons/LibraryIcon' import { SettingsIcon } from './icons/SettingsIcon' import { SnippetsIcon } from './icons/SnippetsIcon' import { UpsellDialog } from './UpsellDialog' import type { SVGProps } from 'react' export const SUBPAGES = ['snippets', 'blueprints', 'cloud-community', 'cloud-library'] as const const searchParams = new URLSearchParams(window.location.search) interface UpperNavItemProps { name: string url: string label: string } const UpperNavItem = ({ name, url, label }: UpperNavItemProps) => { const pageSlug = useMemo(() => new URL(url).searchParams.get('page'), [url]) const isActive = !searchParams.get('subpage') && searchParams.get('page') === pageSlug return (

{label}

) } const UpperNavItems = () => <> {window.CODE_SNIPPETS?.urls.welcome && ( )} {window.CODE_SNIPPETS?.urls.import && ( )} const MoreNav = () =>

{__('More', 'code-snippets')}

const UpperNav: React.FC = () => { const [isUpsellDialogOpen, setIsUpsellDialogOpen] = useState(false) return (

{__('Code Snippets', 'code-snippets')}

) } interface SubpageItemProps { subpage: typeof SUBPAGES[number] label: string Icon: React.FC> isPro?: boolean } const SubpageItem: React.FC = ({ subpage, label, Icon, isPro }) =>

const LowerNav = () =>

export const Toolbar = () =>