gboost_ui_layout_with_amplify_authenticator_react_quickstart.ts

1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import { Layout } from 'gboost-ui';
4import { Authenticator } from '@aws-amplify/ui-react';
5import '@aws-amplify/ui-react/styles.css';
6
7/**
8 * gboost-ui is typically used within a Green Boost (gboost) generated project.
9 * It provides layout components and theme integration for AWS Amplify applications.
10 */
11function App() {
12  return (
13    <Authenticator.Provider>
14      <Layout
15        navItems={[
16          {
17            children: 'Home',
18            to: '/',
19          },
20        ]}
21        title="My GBoost App"
22      >
23        <div>
24          <h1>Welcome to GBoost</h1>
25          <p>This is a basic quickstart using gboost-ui components.</p>
26        </div>
27      </Layout>
28    </Authenticator.Provider>
29  );
30}
31
32const rootElement = document.getElementById('root');
33if (rootElement) {
34  const root = ReactDOM.createRoot(rootElement);
35  root.render(
36    <React.StrictMode>
37      <App />
38    </React.StrictMode>
39  );
40}