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

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

40 lines 1.7 KB

Raw Download Zip

1	import { forwardRef, memo } from "@wordpress/element";
2	import { sprintf, __ } from "@wordpress/i18n";
3	// @ts-ignore
4	import useOnboardingStore from "@/store/useOnboardingStore";
5	import { clsx } from "clsx";
6
7	export const Top = memo(forwardRef<HTMLDivElement, { className?: string }>(
8	({ className }, ref) => {
9	const { onboardingData } = useOnboardingStore();
10
11	return (
12	<div ref={ref} className={clsx('default-style', className)}>
13	<div className="flex flex-row items-center space-x-2 px-4">
14	{onboardingData.logo && (
15	<img src={onboardingData.logo} alt="Logo" className="h-8 w-auto" />
16	)}
17	<div className="font-semibold text-2xl sm:text-4xl leading-snug sm:leading-7 text-center">
18	{sprintf(__('Welcome to %s!', 'ONBOARDING_WIZARD_TEXT_DOMAIN'), onboardingData.plugin_name)}
19	</div>
20	</div>
21	</div>
22	);
23	}
24	));
25
26	export const Bottom = memo(forwardRef<HTMLDivElement, { className?: string; handleClose: () => void }>(
27	({ className, handleClose }, ref) => {
28	const { onboardingData, isLastStep } = useOnboardingStore();
29	return (
30	<div ref={ref} className={clsx('default-style', className, isLastStep() ? 'opacity-0 pointer-events-none' : 'opacity-100')}>
31	<button
32	onClick={handleClose}
33	className="text-gray-500 text-md underline"
34	>
35	{__(onboardingData.exit_wizard_text ?? 'Exit setup', 'ONBOARDING_WIZARD_TEXT_DOMAIN')}
36	</button>
37	</div>
38	);
39	}
40	));