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

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

58 lines 2.2 KB

Raw Download Zip

1	// @ts-ignore
2	import Icon from '@/utils/Icon';
3	import useOnboardingStore from "../../store/useOnboardingStore";
4	import {renderPossiblyHtml} from '../../utils/html';
5
6	export const ModalHeader = ({
7	currentStep,
8	logo,
9	logo_class,
10	currentStepIndex
11	}) => {
12	const {
13	isInstalling,
14	isUpdating,
15	responseMessage,
16	responseSuccess,
17	licenseStatus,
18	getConditionalText,
19	} = useOnboardingStore();
20
21	const title = getConditionalText(currentStep, 'title', { isUpdating, isInstalling, responseMessage, responseSuccess, licenseStatus }, currentStep.title);
22	const subtitle = getConditionalText(currentStep, 'subtitle', { isUpdating, isInstalling, responseMessage, responseSuccess, licenseStatus }, currentStep.subtitle);
23
24	const iconColor = currentStep.type === "license" && licenseStatus === 'activated' ? 'green' : 'var(--teamupdraft-orange-dark)';
25	const iconName = currentStep.type === "license" && licenseStatus === 'activating' ? 'loading-circle' : currentStep.icon;
26
27	return (
28	<div className="flex flex-col gap-2 justify-center items-center">
29	{(currentStepIndex === 0) && (
30	<div>
31	{logo && (
32	<img src={logo} alt="Logo" className={`h-[54px] w-auto mx-auto ${logo_class \|\| ''}`} />
33	)}
34	</div>
35	)}
36	{/* Step Icon - Only render if an icon is provided */}
37	{currentStep.icon && (
38	<Icon
39	name={iconName}
40	size={60}
41	type=""
42	strokeWidth={1}
43	stroke="none"
44	color={iconColor}
45	fill={iconColor}
46	className="bg-[#fff5eb] rounded-[80px] p-2 shadow-[0_0_10px_#fff5eb] border border-[#fff5eb]"
47	/>
48	)}
49
50	<div className="text-3xl font-semibold text-[var(--teamupdraft-grey-900)] text-center mt-2">
51	{title}
52	</div>
53	<p className="text-[var(--teamupdraft-grey-700)] text-lg leading-relaxed font-normal text-center">
54	{renderPossiblyHtml(subtitle)}
55	</p>
56	</div>
57	);
58	}