import { Button, PanelBody, PanelRow } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import './dashboard.scss';
import compatibleRender from '@utils/compatible-render';
export function Dashboard() {
return (
<div className="generateblocks-dashboard">
<div className="gblocks-dashboard-intro-content">
<h2>{ __( 'GenerateBlocks', 'generateblocks' ) }</h2>
<p>{ __( 'Take WordPress to the next level.', 'generateblocks' ) }</p>
<div className="gblocks-sub-navigation">
{ ! generateblocksDashboard.gbpVersion && (
<Button
variant="primary"
href="https://generatepress.com/blocks/"
target="_blank" rel="noreferrer noopener"
>
{ __( 'GenerateBlocks Pro', 'generateblocks' ) }
</Button>
) }
<Button
variant="secondary"
href="https://generatepress.com/blocks"
target="_blank" rel="noreferrer noopener"
>
{ __( 'Learn more', 'generateblocks' ) }
</Button>
<Button
variant="secondary"
href="https://docs.generateblocks.com"
target="_blank" rel="noreferrer noopener"
>
{ __( 'Documentation', 'generateblocks' ) }
</Button>
</div>
</div>
<PanelBody
title={ __( 'Information', 'generateblocks' ) }
className="gb-dashboard-info"
>
<div className="gblocks-dashboard-panel-row-wrapper">
<PanelRow>
<ul style={ { marginBottom: 0 } }>
<li><strong>Version:</strong> { generateblocksDashboard.gbVersion }</li>
{ !! generateblocksDashboard.gbpVersion ? (
<li><strong>Pro Version:</strong> { generateblocksDashboard.gbpVersion }</li>
) : (
<li><strong>Pro Version:</strong> Not Installed. <a href="https://generatepress.com/blocks">Get Pro</a></li>
) }
</ul>
</PanelRow>
</div>
</PanelBody>
</div>
);
}
window.addEventListener( 'DOMContentLoaded', () => {
compatibleRender(
document.getElementById( 'gblocks-dashboard' ),
<Dashboard />
);
} );