woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 11

Create dashboard container

Browse source
This commit is contained in:
inpsyde-maticluznar 2024-10-25 06:45:01 +02:00
parent fc51e7f1a3
commit af4c2b0905
No known key found for this signature in database
GPG key ID: D005973F231309F6
5 changed files with 27 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

4
modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss
View file

@ -9,9 +9,11 @@
}
&-container {
box-shadow: $shadow-card;
max-width: 1024px;
margin: 0 auto;
&--settings{
max-width: 938px;
}
}
&-card {

17
modules/ppcp-settings/resources/js/Components/ReusableComponents/Container.js
View file

@ -1,5 +1,18 @@
const Container = ( props ) => {
return <div className="ppcp-r-container">{ props.children }</div>;
export const PAGE_ONBOARDING = 'onboarding';
export const PAGE_SETTINGS = 'settings';
const Container = ( { isCard = true, page, children } ) => {
let className = 'ppcp-r-container';
if ( isCard ) {
className += ' ppcp-r-container--card';
}
if ( page ) {
className += ` ppcp-r-container--${ page }`;
}
return <div className={ className }>{ children }</div>;
};
export default Container;

6
modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Dashboard.js
View file

@ -1,10 +1,12 @@
import TabNavigation from '../../ReusableComponents/TabNavigation';
import Container from '../../ReusableComponents/Container';
import { PAGE_SETTINGS } from '../../ReusableComponents/Container';
const Dashboard = () => {
return (
<div>
<Container isCard={ false } page={ PAGE_SETTINGS }>
<TabNavigation />
</div>
</Container>
);
};

7
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js
View file

@ -1,15 +1,16 @@
import Container from '../../ReusableComponents/Container.js';
import Container, {
PAGE_ONBOARDING,
} from '../../ReusableComponents/Container.js';
import StepWelcome from './StepWelcome.js';
import StepBusiness from './StepBusiness.js';
import StepProducts from './StepProducts.js';
import { useState } from '@wordpress/element';
import Dashboard from '../Dashboard/Dashboard';
const Onboarding = () => {
const [ step, setStep ] = useState( 0 );
return (
<Container>
<Container page={ PAGE_ONBOARDING }>
<div className="ppcp-r-card">
<Stepper currentStep={ step } setStep={ setStep } />
</div>

2
modules/ppcp-settings/resources/js/Components/Screens/Settings.js
View file

@ -5,7 +5,7 @@ import Dashboard from './Dashboard/Dashboard';
const Settings = () => {
const [ onboarded, setOnboarded ] = useState( true );
return <>{ onboarded ? <Onboarding /> : <Dashboard /> }</>;
return <>{ onboarded ? <Dashboard /> : <Onboarding /> }</>;
};
export default Settings;