OwlCyberSecurity - MANAGER

Edit File: SiteStructure.jsx

import {
	useEffect,
	useLayoutEffect,
	useMemo,
	useState,
} from '@wordpress/element';
import { __, isRTL } from '@wordpress/i18n';
import { Icon, arrowRight, arrowLeft } from '@wordpress/icons';
import classNames from 'classnames';
import { Title } from '@launch/components/Title';
import { PageLayout } from '@launch/layouts/PageLayout';
import { pageState } from '@launch/state/factory';
import { useUserSelectionStore } from '@launch/state/user-selections';

export const state = pageState('Site Template Type', () => ({
	ready: false,
	canSkip: false,
	useNav: true,
	onRemove: () => {},
}));

export const SiteStructure = () => {
	const { siteStructure, setSiteStructure } = useUserSelectionStore();
	const [firstButton, setFirstButton] = useState(siteStructure);

useLayoutEffect(() => {
		if (firstButton || siteStructure) return;
		// Randomize the order of the buttons
		const random = ['single-page', 'multi-page'].sort(
			() => Math.random() - 0.5,
		);
		setFirstButton(random[0]);
		setSiteStructure(random[0]);
	}, [setSiteStructure, firstButton, siteStructure]);

useEffect(() => {
		state.setState({ ready: !!siteStructure && firstButton });
	}, [siteStructure, firstButton]);

const buttons = useMemo(
		() => [
			<ButtonSelect
				key="single-page"
				onClick={() => setSiteStructure('single-page')}
				selected={siteStructure === 'single-page'}
				imageSrc="https://images.extendify-cdn.com/launch/single-page-website.webp"
				title={__('Single-Page Website', 'extendify-local')}
				description={__(
					'All content displayed on one scrolling page.',
					'extendify-local',
				)}
			/>,
			<ButtonSelect
				key="multi-page"
				onClick={() => setSiteStructure('multi-page')}
				selected={siteStructure === 'multi-page'}
				imageSrc="https://images.extendify-cdn.com/launch/multi-page-website.webp"
				title={__('Multi-Page Website', 'extendify-local')}
				description={__('Multiple interconnected pages.', 'extendify-local')}
			/>,
		],
		[siteStructure, setSiteStructure],
	);
	const buttonsOrdered =
		firstButton === 'multi-page' ? buttons.toReversed() : buttons;

return (
		<PageLayout>
			<div className="grow overflow-y-auto px-6 py-8 md:p-12 3xl:p-16">
				<Title title={__('Pick Your Site Structure', 'extendify-local')} />
				<div className="relative mx-auto flex w-full max-w-2xl flex-col gap-8 lg:flex-row 3xl:max-w-4xl">
					{buttonsOrdered}
				</div>
			</div>
		</PageLayout>
	);
};