From 7a8dd6c813dbd3c8fe8066ebbb3eebffd63e0728 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Wed, 8 Nov 2023 22:35:00 +0800
Subject: [PATCH] feat(demo): layout

---
 demo/gh-pages                |  1 +
 demo/src/app.rs              |  1 +
 demo/src/pages/components.rs |  4 +++
 demo/src/pages/grid/mod.rs   |  7 ++--
 demo/src/pages/layout/mod.rs | 62 ++++++++++++++++++++++++++++++++++++
 demo/src/pages/mod.rs        |  2 ++
 6 files changed, 73 insertions(+), 4 deletions(-)
 create mode 160000 demo/gh-pages
 create mode 100644 demo/src/pages/layout/mod.rs

diff --git a/demo/gh-pages b/demo/gh-pages
new file mode 160000
index 0000000..faaa4df
--- /dev/null
+++ b/demo/gh-pages
@@ -0,0 +1 @@
+Subproject commit faaa4dfa5547b4c3e117999f4ed4cf2332006f2b
diff --git a/demo/src/app.rs b/demo/src/app.rs
index f33f870..775f9d1 100644
--- a/demo/src/app.rs
+++ b/demo/src/app.rs
@@ -80,6 +80,7 @@ fn TheRouter() -> impl IntoView {
                     <Route path="/upload" view=UploadPage/>
                     <Route path="/loading-bar" view=LoadingBarPage/>
                     <Route path="/breadcrumb" view=BreadcrumbPage/>
+                    <Route path="/layout" view=LayoutPage/>
                 </Route>
                 <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                 <Route path="/mobile/nav-bar" view=NavBarDemoPage/>
diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs
index 50e0b63..e7bc4b8 100644
--- a/demo/src/pages/components.rs
+++ b/demo/src/pages/components.rs
@@ -214,6 +214,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
         MenuGroupOption {
             label: "Layout Components".into(),
             children: vec![
+                MenuItemOption {
+                    value: "layout".into(),
+                    label: "Layout".into(),
+                },
                 MenuItemOption {
                     value: "grid".into(),
                     label: "Grid".into(),
diff --git a/demo/src/pages/grid/mod.rs b/demo/src/pages/grid/mod.rs
index 8db57e4..8b308e9 100644
--- a/demo/src/pages/grid/mod.rs
+++ b/demo/src/pages/grid/mod.rs
@@ -1,7 +1,7 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use thaw::*;
 use prisms::highlight_str;
+use thaw::*;
 
 #[component]
 pub fn GridPage() -> impl IntoView {
@@ -9,15 +9,14 @@ pub fn GridPage() -> impl IntoView {
         "grid-demo",
         r#".thaw-grid-item {
         height: 60px;
-        color: white;
         text-align: center;
         line-height: 60px;
       }
       .thaw-grid-item:nth-child(odd) {
-        background-color: #3d8ae5dd;
+        background-color: #0078ff88;
       }
       .thaw-grid-item:nth-child(even) {
-        background-color: #3d8ae5aa;
+        background-color: #0078ffaa;
       }"#,
     );
     view! {
diff --git a/demo/src/pages/layout/mod.rs b/demo/src/pages/layout/mod.rs
new file mode 100644
index 0000000..ce01259
--- /dev/null
+++ b/demo/src/pages/layout/mod.rs
@@ -0,0 +1,62 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use prisms::highlight_str;
+use thaw::*;
+
+#[component]
+pub fn LayoutPage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Layout"</h1>
+            <Demo>
+                <Layout>
+                    <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
+                    <Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
+                </Layout>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    <Layout>
+                        <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
+                        <Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
+                    </Layout>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+            <h3>"sider"</h3>
+            <Demo>
+                <Layout has_sider=true>
+                    <LayoutSider style="background-color: #0078ff99; padding: 20px;">"Sider"</LayoutSider>
+                    <Layout>
+                        <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
+                        <Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
+                    </Layout>
+                </Layout>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    <Layout has_sider=true>
+                        <LayoutSider style="background-color: #0078ff99; padding: 20px;">"Sider"</LayoutSider>
+                        <Layout>
+                            <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
+                            <Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
+                        </Layout>
+                    </Layout>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}
diff --git a/demo/src/pages/mod.rs b/demo/src/pages/mod.rs
index 4b69b42..dd26b40 100644
--- a/demo/src/pages/mod.rs
+++ b/demo/src/pages/mod.rs
@@ -16,6 +16,7 @@ mod icon;
 mod image;
 mod input;
 mod input_number;
+mod layout;
 mod loading_bar;
 mod menu;
 mod message;
@@ -53,6 +54,7 @@ pub use icon::*;
 pub use image::*;
 pub use input::*;
 pub use input_number::*;
+pub use layout::*;
 pub use loading_bar::*;
 pub use menu::*;
 pub use message::*;