wp-optimize / vendor / team-updraft / lib-onboarding-wizard / Wizard / Onboarding / src / components / Modal / ModalTopBar.tsx

ModalTopBar.tsx in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance trunk, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Modal/ModalTopBar.tsx

44 lines 1.7 KB

Raw Download Zip

1	import ButtonInput from "../Inputs/ButtonInput";
2	// @ts-ignore
3	import Icon from '@/utils/Icon';
4	import { sprintf, __ } from "@wordpress/i18n";
5	import ProgressBar from "../ProgressBar";
6	import useOnboardingStore from "../../store/useOnboardingStore";
7
8	export const ModalTopBar = ({ handlePrevious, currentStep }) => {
9	const {
10	currentStepIndex,
11	steps,
12	isLastStep,
13	} = useOnboardingStore();
14
15	return (
16	<>
17	{(currentStepIndex > 0) && (
18	<div className="w-full mb-4">
19	<div className="flex items-center gap-2 justify-between">
20	<ButtonInput
21	className="flex items-center gap-2 justify-center text-lg pl-1"
22	btnVariant="transparent"
23	size="sm"
24	onClick={(e) => handlePrevious()}
25	key={currentStep.id + "previous"}
26	>
27	<Icon name="WestRoundedIcon" type="material" size={15} color="gray500" fill="gray500" />
28
29	{__('Back', 'ONBOARDING_WIZARD_TEXT_DOMAIN')}
30	</ButtonInput>
31	<div className="text-sm text-gray-600">
32	{sprintf(__('Step %1$d of %2$d', 'ONBOARDING_WIZARD_TEXT_DOMAIN'), currentStepIndex, steps.length - 1)}
33	</div>
34	</div>
35
36	<ProgressBar
37	currentStep={currentStepIndex - 1}
38	totalSteps={steps.length - 1}
39	/>
40	</div>
41	)}
42	</>
43	);
44	}