# code-snippets/trunk/js/components/ManageMenu/AiAgentDemo/DemoPlanCard.tsx

Code Snippets, version trunk. 59 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/trunk/code/js/components/ManageMenu/AiAgentDemo/DemoPlanCard.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/trunk/raw/js/components/ManageMenu/AiAgentDemo/DemoPlanCard.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/ManageMenu/AiAgentDemo/DemoPlanCard.tsx#L10-L20`.

```tsx
import React from 'react'
import { __, _n, sprintf } from '@wordpress/i18n'
import classnames from 'classnames'
import { Badge } from '../../common/Badge'
import { Button } from '../../common/Button'
import { DEMO_PLAN } from './demoScript'
import { languageToSnippetType } from './types'

interface DemoPlanCardProps {
	/** Whether the walkthrough is clicking "Accept & create" right now. */
	accepted: boolean
}

export const DemoPlanCard: React.FC<DemoPlanCardProps> = ({ accepted }) => {
	const badge = sprintf(
		/* translators: %d: number of snippets in the bundle. */
		_n('Bundle · %d snippet', 'Bundle · %d snippets', DEMO_PLAN.parts.length, 'code-snippets'),
		DEMO_PLAN.parts.length
	)

	return (
		<div className="ai-agent-plan">
			<div className="ai-agent-plan__header">
				<h2 className="ai-agent-plan__title">{DEMO_PLAN.title}</h2>
				<span className="ai-agent-plan__badge is-bundle">{badge}</span>
			</div>

			<p className="ai-agent-plan__overview">{DEMO_PLAN.summary}</p>

			<h3 className="ai-agent-plan__parts-heading">{__('What will be created', 'code-snippets')}</h3>

			<ul className="ai-agent-plan__parts">
				{DEMO_PLAN.parts.map(part =>
					<li key={part.name} className="ai-agent-plan__part">
						<Badge name={languageToSnippetType(part.language)} small />
						<span className="ai-agent-plan__part-name">{part.name}</span>
						<p className="ai-agent-plan__part-desc">{part.description}</p>
					</li>)}
			</ul>

			<div className="ai-agent-plan__actions">
				<Button
					primary
					type="button"
					className={classnames('ai-agent-demo-accept', { 'demo-click': accepted })}
					aria-hidden="true"
					tabIndex={-1}
				>
					{__('Accept & create', 'code-snippets')}
				</Button>

				<Button secondary type="button" aria-hidden="true" tabIndex={-1}>
					{__('Refine plan', 'code-snippets')}
				</Button>
			</div>
		</div>
	)
}

```