From b64dd428506f5b67b8f9ba9654db069fa6a34ebe Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Sat, 26 Feb 2022 22:45:47 +0800
Subject: [PATCH] website: add bundle example page.

---
 website/public/bundle.html | 69 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 website/public/bundle.html
diff --git a/website/public/bundle.html b/website/public/bundle.html
new file mode 100644
index 0000000..67421b2
--- /dev/null
+++ b/website/public/bundle.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="https://unpkg.com/@babel/standalone@7.17.x/babel.min.js" crossorigin></script>
+    <script src="https://unpkg.com/react@17.x/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@17.x/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@uiw/codepen-require-polyfill/index.js"></script>
+    <script src="https://unpkg.com/@uiw/react-layout@4.x/dist/layout.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/@uiw/react-layout@4.x/dist/layout.css">
+    <title>@uiw/react-layout bundle example</title>
+    <meta name="keywords" content="react,simple,monorepo,layout,react-layout,component,project,package,development" />
+    <meta name="description" content="React components that handle the overall layout of the page." />
+  </head>
+  <body>
+    <div id="container" style="padding: 24px"></div>
+    <script type="text/babel">
+      import Layout from '@uiw/react-layout';
+      const { Header, Footer, Sider, Content } = Layout;
+
+      const stylHeader = { color: '#fff' }
+      const stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' }
+      const stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }
+
+      function Demo() {
+        const [collapsed, setCollapsed] = React.useState(false)
+        return (
+          <React.Fragment>
+            <Layout style={{ marginBottom: 20 }}>
+              <Header style={stylHeader}>Header</Header>
+              <Layout>
+                <Sider style={stylSider}>Sider</Sider>
+                <Content style={stylConten}>Content</Content>
+              </Layout>
+              <Footer>Footer</Footer>
+            </Layout>
+
+            <Layout style={{ marginBottom: 20 }}>
+              <Header style={stylHeader}>Header</Header>
+              <Layout>
+                <Content style={stylConten}>Content</Content>
+                <Sider style={stylSider}>Sider</Sider>
+              </Layout>
+              <Footer>Footer</Footer>
+            </Layout>
+
+            <Layout style={{ marginBottom: 20 }}>
+              <Sider collapsed={collapsed} style={stylSider}>Sider</Sider>
+              <Layout>
+                <Header style={stylHeader}>
+                  <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '>>' : '<<'}</button>
+                </Header>
+                <Content style={stylConten}>Content</Content>
+                <Footer>Footer</Footer>
+              </Layout>
+            </Layout>
+
+            <Layout style={{ marginBottom: 20 }}>
+              <Header style={stylHeader}>Header</Header>
+              <Content style={stylConten}>Content</Content>
+              <Footer>Footer</Footer>
+            </Layout>
+          </React.Fragment>
+        );
+      }
+
+      ReactDOM.render(<Demo />, document.getElementById('container'));
+    </script>
+  </body>
+</html>
\ No newline at end of file
