FM / common

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

/home/vianto5/heredit.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/heredit.mx/wp-content/plugins/code-snippets/js/components/common/SubnavTabs.tsx (2254B)

export interface SubnavTab<T extends string> {
	name: T
	label: string
	pro?: boolean
}

export const getTabFromQuery = <Tab extends SubnavTab<string>>(
	tabs: Tab[],
	queryParamName: string
): Tab => {
	const tabParam = fetchQueryParam(queryParamName)

for (const tab of tabs) {
		if (tab.name === tabParam) {
			return tab
		}
	}

return tabs[0]
}

export interface SubnavTabsProps<Tab extends SubnavTab<string>> {
	tabs: readonly Tab[]
	ariaLabel: string
	className?: string
	currentTab: Tab
	getTabCount?: (tab: Tab) => number | undefined
	setCurrentTab: (tab: Tab) => void
	queryParamName?: string
}

export const SubnavTabs = <Tab extends SubnavTab<string>>({
	tabs,
	ariaLabel,
	className,
	currentTab,
	getTabCount,
	setCurrentTab,
	queryParamName,
}: SubnavTabsProps<Tab>) => {
	const { atStart, atEnd, scrollRef } = useHorizontalScrollOverflow()

return (
		<div
			className={classnames('snippet-type-nav-wrapper', {
				'has-scroll-start': !atStart,
				'has-scroll-end': !atEnd
			})}
		>
			<nav ref={scrollRef} className={classnames('snippet-type-nav', className)} aria-label={ariaLabel}>
				<ul>
					{tabs.map(tab => {
						const count = getTabCount?.(tab)

return (
							<li key={tab.name}>
								<button
									type="button"
									className={classnames('snippet-type-link', `${tab.name}-subnav-link`, {
										'active-type': tab.name === currentTab.name
									})}
									aria-current={tab.name === currentTab.name ? 'page' : undefined}
									onClick={() => {
										setCurrentTab(tab)

if (queryParamName) {
											updateQueryParams({ [queryParamName]: tab.name })
										}
									}}
								>
									<span>{tab.label}</span>
									{count && <span className="subnav-count">{count}</span>}
									{tab.pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
								</button>
							</li>
						)
					})}
				</ul>
			</nav>
		</div>
	)
}

import classnames from 'classnames' import { __ } from '@wordpress/i18n' import React from 'react' import { isLicensed } from '../../utils/screen' import { useHorizontalScrollOverflow } from '../../hooks/useHorizontalScrollOverflow' import { fetchQueryParam, updateQueryParams } from '../../utils/urls' export interface SubnavTab { name: T label: string pro?: boolean } export const getTabFromQuery = >( tabs: Tab[], queryParamName: string ): Tab => { const tabParam = fetchQueryParam(queryParamName) for (const tab of tabs) { if (tab.name === tabParam) { return tab } } return tabs[0] } export interface SubnavTabsProps> { tabs: readonly Tab[] ariaLabel: string className?: string currentTab: Tab getTabCount?: (tab: Tab) => number | undefined setCurrentTab: (tab: Tab) => void queryParamName?: string } export const SubnavTabs = >({ tabs, ariaLabel, className, currentTab, getTabCount, setCurrentTab, queryParamName, }: SubnavTabsProps) => { const { atStart, atEnd, scrollRef } = useHorizontalScrollOverflow() return (

) }