| 1 |
import React from 'react' |
| 2 |
import { __ } from '@wordpress/i18n' |
| 3 |
import { Button } from '../Button' |
| 4 |
|
| 5 |
export interface DemoPageHeaderProps { |
| 6 |
title: string |
| 7 |
description: string |
| 8 |
/** Whether the walkthrough has left its idle state. */ |
| 9 |
hasStarted: boolean |
| 10 |
isFinished: boolean |
| 11 |
onPlay: VoidFunction |
| 12 |
onSkip: VoidFunction |
| 13 |
onReplay: VoidFunction |
| 14 |
} |
| 15 |
|
| 16 |
/** |
| 17 |
* Page header shared by the feature walkthroughs: the screen title, a chip |
| 18 |
* marking the page as a demo, and the playback controls for whichever stage |
| 19 |
* the walkthrough is currently in. |
| 20 |
*/ |
| 21 |
export const DemoPageHeader: React.FC<DemoPageHeaderProps> = ({ |
| 22 |
title, |
| 23 |
description, |
| 24 |
hasStarted, |
| 25 |
isFinished, |
| 26 |
onPlay, |
| 27 |
onSkip, |
| 28 |
onReplay |
| 29 |
}) => |
| 30 |
<> |
| 31 |
<div className="snippets-page-header demo-page-header"> |
| 32 |
<h1> |
| 33 |
{title} |
| 34 |
<span className="demo-chip">{__('Demo', 'code-snippets')}</span> |
| 35 |
</h1> |
| 36 |
|
| 37 |
<div className="demo-controls"> |
| 38 |
{!hasStarted && <Button primary large type="button" className="demo-play" onClick={onPlay}> |
| 39 |
{__('Play demo', 'code-snippets')} |
| 40 |
</Button>} |
| 41 |
|
| 42 |
{hasStarted && !isFinished && <Button secondary type="button" onClick={onSkip}> |
| 43 |
{__('Skip animation', 'code-snippets')} |
| 44 |
</Button>} |
| 45 |
|
| 46 |
{isFinished && <Button primary type="button" onClick={onReplay}> |
| 47 |
{__('Run demo again', 'code-snippets')} |
| 48 |
</Button>} |
| 49 |
</div> |
| 50 |
</div> |
| 51 |
|
| 52 |
<p className="snippets-page-description">{description}</p> |
| 53 |
</> |
| 54 |
|
