# code-snippets/trunk/js/components/ManageMenu/CloudLibraryDemo/callouts.ts

Code Snippets, version trunk. 30 lines.

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

```typescript
import { __ } from '@wordpress/i18n'
import type { CalloutContent } from '../../common/demo/DemoCallout'
import type { DemoStage } from './types'

const STEPS: Partial<Record<DemoStage, CalloutContent>> = {
	library: {
		step: __('Step 1 of 4', 'code-snippets'),
		title: __('Your whole cloud, in one place', 'code-snippets'),
		body: __('Every snippet and bundle saved to your Code Snippets Cloud account is listed here, on every site you connect — so work you did once is never more than a click away.', 'code-snippets')
	},
	preview: {
		step: __('Step 2 of 4', 'code-snippets'),
		title: __('Read it before you take it', 'code-snippets'),
		body: __('Preview shows the full code without leaving the page, so you can check exactly what a snippet does before it touches your site.', 'code-snippets')
	},
	download: {
		step: __('Step 3 of 4', 'code-snippets'),
		title: __('Download in one click', 'code-snippets'),
		body: __('The snippet lands in your snippets table straight away — and inactive, so nothing runs until you have looked it over and switched it on.', 'code-snippets')
	},
	synced: {
		step: __('Step 4 of 4', 'code-snippets'),
		title: __('Kept in sync', 'code-snippets'),
		body: __('Once downloaded the row shows as synced, with an edit link instead of a download button. Change it here or in the cloud and the two are kept together.', 'code-snippets')
	}
}

export const getCallout = (stage: DemoStage): CalloutContent | undefined =>
	STEPS[stage]

```