e-commerce-starter

Layout2.js

import React, { useState } from 'react';

// Ant Design
import { Layout } from 'antd';
const { Content, Footer } = Layout;

// Header
import HeaderComponent from './Header';

// Stripe
import { loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';

const stripePromise = loadStripe(`${process.env.PUBLISHABLE_KEY}`);
function LayoutComponent(props) {
    return (
        <div>
            <HeaderComponent title={props.title} />
            <Content className="site-layout">
                <Layout
                    className="site-layout-background"
                    style={{
                        padding: '24px 0',
                        marginTop: 64,
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        minHeight: '800px',
                        background: '#fff',
                    }}
                >
                    <Content
                        style={{
                            padding: '24px',
                        }}
                    >
                        <Elements stripe={stripePromise}>
                            {props.children}
                        </Elements>
                    </Content>
                </Layout>
                <Footer style={{ textAlign: 'center', background: '#fff' }}>
                    E-Commerce Website with Webiny and Next.js @ 2020
                </Footer>
            </Content>
        </div>
    );
}

export default LayoutComponent;