From 3be21b4e03ea5430275a7797bd046eadb87d9a5c Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Thu, 21 Sep 2023 22:32:20 +0800
Subject: [PATCH] feat: mobile demo

---
 gh-pages/src/app.rs                    |  6 ++--
 gh-pages/src/components/site_header.rs |  2 +-
 gh-pages/src/pages/mobile.rs           |  4 +--
 gh-pages/src/pages/tabbar/mod.rs       | 41 ++++++++++++++++++++++++++
 4 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/gh-pages/src/app.rs b/gh-pages/src/app.rs
index fe249f7..633f0e5 100644
--- a/gh-pages/src/app.rs
+++ b/gh-pages/src/app.rs
@@ -11,9 +11,7 @@ pub fn App() -> impl IntoView {
                 <Route path="/components" view=ComponentsPage>
                     <Route path="/menu" view=MenuPage />
                     <Route path="/slider" view=SliderPage />
-                    <Route path="/tabbar" view=|| view! {
-                        <MobilePage path="/melt-ui?path=/mobile/tabbar" />
-                    } />
+                    <Route path="/tabbar" view=TabbarPage />
                     <Route path="/nav-bar" view=|| view! {
                         <MobilePage path="/melt-ui?path=/mobile/nav-bar" />
                     } />
@@ -28,7 +26,7 @@ pub fn App() -> impl IntoView {
                     <Route path="/tabs" view=TabsPage />
                     <Route path="/select" view=SelectPage />
                 </Route>
-                <Route path="/mobile/tabbar" view=TabbarPage />
+                <Route path="/mobile/tabbar" view=TabbarDemoPage />
                 <Route path="/mobile/nav-bar" view=NavBarPage />
                 <Route path="/mobile/toast" view=ToastPage />
             </Routes>
diff --git a/gh-pages/src/components/site_header.rs b/gh-pages/src/components/site_header.rs
index e94e22d..b4e9517 100644
--- a/gh-pages/src/components/site_header.rs
+++ b/gh-pages/src/components/site_header.rs
@@ -6,7 +6,7 @@ use melt_ui::*;
 pub fn SiteHeader() -> impl IntoView {
     view! {
         <LayoutHeader
-            style="height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #efeff6"
+            style="height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #e5e8eb"
         >
             <span style="cursor: pointer" on:click=move |_| {
                 let navigate = use_navigate();
diff --git a/gh-pages/src/pages/mobile.rs b/gh-pages/src/pages/mobile.rs
index b03c0b0..0b71fa1 100644
--- a/gh-pages/src/pages/mobile.rs
+++ b/gh-pages/src/pages/mobile.rs
@@ -3,8 +3,8 @@ use leptos::*;
 #[component]
 pub fn MobilePage(path: &'static str) -> impl IntoView {
     view! {
-        <div style="height: 100vh; display: flex; align-items: center; justify-content: center; background: #eff2f5">
-            <iframe src=path style="width: 360px; height: 640px; background-color: #fff; border: none; border-radius: 16px; border: 1px solid #e1e1e1"/>
+        <div style="height: 100vh; width: 400px; text-align: center">
+            <iframe src=path style="margin-top: 5vh; width: 350px; height: 680px; border-radius: 16px; border: 1px solid #eee; box-shadow: #ebedf0 0 4px 12px;"/>
         </div>
     }
 }
diff --git a/gh-pages/src/pages/tabbar/mod.rs b/gh-pages/src/pages/tabbar/mod.rs
index 6bff7bf..8afcaa5 100644
--- a/gh-pages/src/pages/tabbar/mod.rs
+++ b/gh-pages/src/pages/tabbar/mod.rs
@@ -1,8 +1,49 @@
+use crate::{
+    components::{Demo, DemoCode},
+    pages::MobilePage,
+};
+use indoc::indoc;
 use leptos::*;
 use melt_ui::mobile::*;
 
 #[component]
 pub fn TabbarPage() -> impl IntoView {
+    view! {
+        <div style="display: flex">
+            <div style="width: 896px; margin: 0 auto;">
+                <h1>"Tabbar"</h1>
+                <Demo>
+                    ""
+                    <DemoCode slot>
+                        {
+                            indoc!(r#"
+                            let selected = create_rw_signal(String::from("o"));
+                            
+                            <Tabbar selected>
+                                <TabbarItem name="a">
+                                    "and"
+                                </TabbarItem>
+                                <TabbarItem name="i">
+                                    "if"
+                                </TabbarItem>
+                                <TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
+                                    "or"
+                                </TabbarItem>
+                            </Tabbar>
+                            "#)
+                        }
+                    </DemoCode>
+                </Demo>
+            </div>
+            <div>
+                <MobilePage path="/melt-ui?path=/mobile/nav-bar" />
+            </div>
+        </div>
+    }
+}
+
+#[component]
+pub fn TabbarDemoPage() -> impl IntoView {
     let selected = create_rw_signal(String::from("o"));
     view! {
         <div style="height: 100vh; background: #f5f5f5">