Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 1x 1x | import { Card, Button, Icon } from "@canonical/react-components";
import type { TooltipRenderProps } from "react-joyride";
function TourStep(props: TooltipRenderProps): React.JSX.Element {
const {
backProps,
closeProps,
continuous,
index,
primaryProps,
step,
isLastStep,
size,
} = props;
return (
<Card style={{ border: "none" }}>
<h4>{step.title}</h4>
{step.content}
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div>
Done?{" "}
<button
className="p-button--link u-no-margin--bottom"
{...closeProps}
>
Skip tour
</button>
.
</div>
<div>
<span>
{index + 1} / {size}
</span>
<Button
{...backProps}
disabled={index < 1}
className="u-no-margin--bottom"
style={{ marginLeft: "1rem" }}
>
<Icon name="chevron-left" />
<span className="u-off-screen">{backProps.title}</span>
</Button>
{continuous && (
<>
<Button
appearance="positive"
{...primaryProps}
className="u-no-margin--bottom u-no-margin--right"
>
{isLastStep ? (
<>Finish tour</>
) : (
<>
<Icon name="chevron-right" light />
<span className="u-off-screen">{primaryProps.title}</span>
</>
)}
</Button>
</>
)}
</div>
</div>
</Card>
);
}
export default TourStep;
|