# code-snippets/3.10.1/js/components/SnippetForm/page/PageHeading.tsx

Code Snippets, version 3.10.1. 53 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/3.10.1/code/js/components/SnippetForm/page/PageHeading.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/3.10.1/raw/js/components/SnippetForm/page/PageHeading.tsx
- Modified: 2025-08-29T08:54:36+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/3.10.1/code/js/components/SnippetForm/page/PageHeading.tsx#L10-L20`.

```tsx
import { __, _x } from '@wordpress/i18n'
import React from 'react'
import { useSnippetForm } from '../../../hooks/useSnippetForm'
import { createSnippetObject } from '../../../utils/snippets/snippets'
import type { Snippet } from '../../../types/Snippet'

const OPTIONS = window.CODE_SNIPPETS_EDIT

const getAddNewHeading = (snippet: Snippet): string =>
	'condition' === snippet.scope
		? __('Add New Condition', 'code-snippets')
		: __('Add New Snippet', 'code-snippets')

export const PageHeading: React.FC = () => {
	const { snippet, updateSnippet, setCurrentNotice } = useSnippetForm()

	return (
		<h1>
			{snippet.id
				? <>
					{`${'condition' === snippet.scope
						? __('Edit Condition', 'code-snippets')
						: __('Edit Snippet', 'code-snippets')} `}

					<a
						href={window.CODE_SNIPPETS?.urls.addNew}
						className="page-title-action"
						onClick={event => {
							event.preventDefault()
							updateSnippet(({ scope }) => createSnippetObject({ scope }))
							setCurrentNotice(undefined)

							window.document.title = window.document.title
								.replace(__('Edit Snippet', 'code-snippets'), getAddNewHeading(snippet))
								.replace(__('Edit Condition', 'code-snippets'), getAddNewHeading(snippet))

							window.history.pushState({}, '', window.CODE_SNIPPETS?.urls.addNew)
						}}
					>
						{_x('Add New', 'snippet', 'code-snippets')}
					</a>
				</>
				: getAddNewHeading(snippet)}

			{OPTIONS?.pageTitleActions && Object.entries(OPTIONS.pageTitleActions).map(([label, url]) =>
				<>
					<a key={label} href={url} className="page-title-action">{label}</a>{' '}
				</>
			)}
		</h1>
	)
}

```