@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
24 lines (23 loc) • 1.84 kB
JavaScript
import React, { useCallback } from 'react';
import Box from '../../../box';
import Button from '../../../button';
import SpaceBetween from '../../../space-between';
import styles from './styles.css.js';
import { fireNonCancelableEvent } from '../../../internal/events/index';
import { CongratulationScreen } from './congratulation-screen';
import { TaskList } from './task-list';
export default function TutorialDetailView(_a) {
var tutorial = _a.tutorial, onExitTutorialHandler = _a.onExitTutorial, _b = _a.currentStepIndex, currentStepIndex = _b === void 0 ? 0 : _b, onFeedbackClickHandler = _a.onFeedbackClick, i18nStrings = _a.i18nStrings;
var onExitTutorial = useCallback(function () {
fireNonCancelableEvent(onExitTutorialHandler, { tutorial: tutorial });
}, [onExitTutorialHandler, tutorial]);
var onFeedbackClick = useCallback(function () {
fireNonCancelableEvent(onFeedbackClickHandler, { tutorial: tutorial });
}, [onFeedbackClickHandler, tutorial]);
return (React.createElement(React.Fragment, null,
React.createElement(SpaceBetween, { size: "xl" },
React.createElement("div", { className: styles['tutorial-title'] },
React.createElement(Button, { variant: "icon", onClick: onExitTutorial, ariaLabel: i18nStrings.labelExitTutorial, formAction: "none", iconName: "arrow-left" }),
React.createElement(Box, { variant: "h2", padding: { top: 'xxs' }, margin: { left: 's' } }, tutorial.title)),
tutorial.completed ? (React.createElement(CongratulationScreen, { onFeedbackClick: onFeedbackClick, i18nStrings: i18nStrings }, tutorial.completedScreenDescription)) : (React.createElement(TaskList, { tasks: tutorial.tasks, onExitTutorial: onExitTutorial, currentGlobalStepIndex: currentStepIndex, i18nStrings: i18nStrings })))));
}