| 1 |
import { __ } from '@wordpress/i18n' |
| 2 |
import { CompletedTasks } from '@onboarding/components/CompletedTasks' |
| 3 |
import { PageControl } from '@onboarding/components/PageControl' |
| 4 |
import { Logo } from '@onboarding/svg' |
| 5 |
|
| 6 |
export const PageLayout = ({ children, includeNav = true }) => { |
| 7 |
return ( |
| 8 |
<div className="flex flex-col md:flex-row"> |
| 9 |
<div className="bg-partner-primary-bg text-partner-primary-text py-12 px-10 md:h-screen flex flex-col justify-between md:w-40vw md:max-w-md flex-shrink-0"> |
| 10 |
<div className="max-w-prose md:max-w-sm pr-8"> |
| 11 |
<div className="md:min-h-48"> |
| 12 |
{window.extOnbData?.partnerLogo && ( |
| 13 |
<div className="pb-8"> |
| 14 |
<img |
| 15 |
style={{ maxWidth: '200px' }} |
| 16 |
src={window.extOnbData.partnerLogo} |
| 17 |
alt={window.extOnbData?.partnerName ?? ''} |
| 18 |
/> |
| 19 |
</div> |
| 20 |
)} |
| 21 |
{children[0]} |
| 22 |
</div> |
| 23 |
<CompletedTasks disabled={!includeNav} /> |
| 24 |
</div> |
| 25 |
|
| 26 |
<div className="hidden md:flex items-center space-x-3"> |
| 27 |
<span className="opacity-70 text-xs"> |
| 28 |
{__('Powered by', 'extendify')} |
| 29 |
</span> |
| 30 |
<span className="relative"> |
| 31 |
<Logo className="logo text-partner-primary-text w-28" /> |
| 32 |
<span className="absolute -bottom-2 right-3 font-semibold tracking-tight"> |
| 33 |
Launch |
| 34 |
</span> |
| 35 |
</span> |
| 36 |
</div> |
| 37 |
</div> |
| 38 |
<div className="flex-grow md:h-screen md:overflow-y-scroll"> |
| 39 |
{includeNav ? ( |
| 40 |
<div className="pt-12 pb-4 sticky top-0 bg-white z-50 max-w-onboarding-content mx-auto px-4 xl:px-0"> |
| 41 |
<PageControl /> |
| 42 |
</div> |
| 43 |
) : null} |
| 44 |
<div className="mt-8 mb-8 xl:mb-12 flex justify-center max-w-onboarding-content mx-auto px-4 xl:px-0"> |
| 45 |
{children[1]} |
| 46 |
</div> |
| 47 |
</div> |
| 48 |
</div> |
| 49 |
) |
| 50 |
} |
| 51 |
|
