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.5.2, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Modal/ModalHeader.tsx
| 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 = ({ currentStep }) => { |
| 7 | const { |
| 8 | isInstalling, |
| 9 | isUpdating, |
| 10 | responseMessage, |
| 11 | responseSuccess, |
| 12 | licenseStatus, |
| 13 | getConditionalText, |
| 14 | } = useOnboardingStore(); |
| 15 | |
| 16 | const title = getConditionalText(currentStep, 'title', { isUpdating, isInstalling, responseMessage, responseSuccess, licenseStatus }, currentStep.title); |
| 17 | const subtitle = getConditionalText(currentStep, 'subtitle', { isUpdating, isInstalling, responseMessage, responseSuccess, licenseStatus }, currentStep.subtitle); |
| 18 | |
| 19 | const iconColor = currentStep.type === "license" && licenseStatus === 'activated' ? 'green' : 'var(--teamupdraft-orange-dark)'; |
| 20 | const iconName = currentStep.type === "license" && licenseStatus === 'activating' ? 'loading-circle' : currentStep.icon; |
| 21 | |
| 22 | return ( |
| 23 | <div className="flex flex-col gap-2 justify-center items-center"> |
| 24 | {/* Step Icon - Only render if an icon is provided */} |
| 25 | {currentStep.icon && ( |
| 26 | <Icon |
| 27 | name={iconName} |
| 28 | size={60} |
| 29 | type="" |
| 30 | strokeWidth={1} |
| 31 | stroke="none" |
| 32 | color={iconColor} |
| 33 | fill={iconColor} |
| 34 | className="bg-[#fff5eb] rounded-[80px] p-2 shadow-[0_0_10px_#fff5eb] border border-[#fff5eb]" |
| 35 | /> |
| 36 | )} |
| 37 | |
| 38 | <div className="text-3xl font-semibold text-[var(--teamupdraft-grey-900)] text-center mt-2"> |
| 39 | {title} |
| 40 | </div> |
| 41 | <p className="text-[var(--teamupdraft-grey-700)] text-lg leading-relaxed font-normal text-center"> |
| 42 | {renderPossiblyHtml(subtitle)} |
| 43 | </p> |
| 44 | </div> |
| 45 | ); |
| 46 | } |