# code-snippets/trunk/js/components/common/demo/DemoUpsell.tsx

Code Snippets, version trunk. 39 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/trunk/code/js/components/common/demo/DemoUpsell.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/trunk/raw/js/components/common/demo/DemoUpsell.tsx
- Modified: 2026-09-22T07:42:04+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/trunk/code/js/components/common/demo/DemoUpsell.tsx#L10-L20`.

```tsx
import React from 'react'
import { __ } from '@wordpress/i18n'
import { Button } from '../Button'
import type { ReactNode } from 'react'

const PRICING_URL = 'https://codesnippets.pro/pricing/'

export interface DemoUpsellProps {
	title: string
	children: ReactNode
	onReplay: VoidFunction
}

/**
 * Closing panel shared by the feature walkthroughs: what the visitor just saw,
 * what the real feature does, and the route to it.
 */
export const DemoUpsell: React.FC<DemoUpsellProps> = ({ title, children, onReplay }) =>
	<div className="demo-upsell">
		<h2 className="demo-upsell__title">{title}</h2>

		{children}

		<div className="demo-upsell__actions">
			<a
				className="button button-primary button-large"
				href={PRICING_URL}
				target="_blank"
				rel="noopener noreferrer"
			>
				{__('Upgrade to Pro', 'code-snippets')}
			</a>

			<Button secondary type="button" onClick={onReplay}>
				{__('Run demo again', 'code-snippets')}
			</Button>
		</div>
	</div>

```