From cf26965f66c7281d82e46d36721ed2f5a64e995e Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Tue, 7 Nov 2023 17:43:28 +0800
Subject: [PATCH] feat: add breadcrumb component

---
 demo/src/app.rs                   |  1 +
 demo/src/pages/breadcrumb/mod.rs  | 54 +++++++++++++++++++++++++++++++
 demo/src/pages/components.rs      |  6 +++-
 demo/src/pages/mod.rs             |  2 ++
 src/breadcrumb/breadcrumb.css     | 18 +++++++++++
 src/breadcrumb/breadcrumb_item.rs | 17 ++++++++++
 src/breadcrumb/mod.rs             | 29 +++++++++++++++++
 src/lib.rs                        |  2 ++
 8 files changed, 128 insertions(+), 1 deletion(-)
 create mode 100644 demo/src/pages/breadcrumb/mod.rs
 create mode 100644 src/breadcrumb/breadcrumb.css
 create mode 100644 src/breadcrumb/breadcrumb_item.rs
 create mode 100644 src/breadcrumb/mod.rs

diff --git a/demo/src/app.rs b/demo/src/app.rs
index 521d882..c61b815 100644
--- a/demo/src/app.rs
+++ b/demo/src/app.rs
@@ -75,6 +75,7 @@ fn TheRouter() -> impl IntoView {
                     <Route path="/tag" view=TagPage/>
                     <Route path="/upload" view=UploadPage/>
                     <Route path="/loading-bar" view=LoadingBarPage/>
+                    <Route path="/breadcrumb" view=BreadcrumbPage/>
                 </Route>
                 <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                 <Route path="/mobile/nav-bar" view=NavBarDemoPage/>
diff --git a/demo/src/pages/breadcrumb/mod.rs b/demo/src/pages/breadcrumb/mod.rs
new file mode 100644
index 0000000..1b6cdb5
--- /dev/null
+++ b/demo/src/pages/breadcrumb/mod.rs
@@ -0,0 +1,54 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use prisms::highlight_str;
+use thaw::*;
+
+#[component]
+pub fn BreadcrumbPage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Breadcrumb"</h1>
+            <Demo>
+                <Breadcrumb>
+                    <BreadcrumbItem>
+                        "Rust"
+                    </BreadcrumbItem>
+                    <BreadcrumbItem>
+                        "Leptos"
+                    </BreadcrumbItem>
+                    <BreadcrumbItem>
+                        "UI"
+                    </BreadcrumbItem>
+                    <BreadcrumbItem>
+                        "Thaw"
+                    </BreadcrumbItem>
+                </Breadcrumb>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    <Breadcrumb>
+                        <BreadcrumbItem>
+                            "Rust"
+                        </BreadcrumbItem>
+                        <BreadcrumbItem>
+                            "Leptos"
+                        </BreadcrumbItem>
+                        <BreadcrumbItem>
+                            "UI"
+                        </BreadcrumbItem>
+                        <BreadcrumbItem>
+                            "Thaw"
+                        </BreadcrumbItem>
+                    </Breadcrumb>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}
diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs
index 52a2172..426bcea 100644
--- a/demo/src/pages/components.rs
+++ b/demo/src/pages/components.rs
@@ -52,7 +52,7 @@ impl IntoView for MenuGroupOption {
     fn into_view(self) -> View {
         let Self { label, children } = self;
         view! {
-            <MenuGroup label>
+            <MenuGroup label=format!("{label} ({})", children.len())>
                 {
                     children.into_iter().map(|v| v.into_view()).collect_view()
                 }
@@ -167,6 +167,10 @@ fn gen_menu_data() -> Vec<MenuGroupOption> {
         MenuGroupOption {
             label: "Navigation Components".into(),
             children: vec![
+                MenuItemOption {
+                    value: "breadcrumb".into(),
+                    label: "Breadcrumb".into(),
+                },
                 MenuItemOption {
                     value: "loading-bar".into(),
                     label: "Loading Bar".into(),
diff --git a/demo/src/pages/mod.rs b/demo/src/pages/mod.rs
index e52e8e2..28548bb 100644
--- a/demo/src/pages/mod.rs
+++ b/demo/src/pages/mod.rs
@@ -2,6 +2,7 @@ mod alert;
 mod auto_complete;
 mod avatar;
 mod badge;
+mod breadcrumb;
 mod button;
 mod card;
 mod checkbox;
@@ -37,6 +38,7 @@ pub use alert::*;
 pub use auto_complete::*;
 pub use avatar::*;
 pub use badge::*;
+pub use breadcrumb::*;
 pub use button::*;
 pub use card::*;
 pub use checkbox::*;
diff --git a/src/breadcrumb/breadcrumb.css b/src/breadcrumb/breadcrumb.css
new file mode 100644
index 0000000..65a26dd
--- /dev/null
+++ b/src/breadcrumb/breadcrumb.css
@@ -0,0 +1,18 @@
+.thaw-breadcrumb > ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.thaw-breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+}
+
+.thaw-breadcrumb-item__separator {
+    margin: 0 8px;
+}
+
+.thaw-breadcrumb-item__separator:last-child {
+    display: none;
+}
diff --git a/src/breadcrumb/breadcrumb_item.rs b/src/breadcrumb/breadcrumb_item.rs
new file mode 100644
index 0000000..d269dbb
--- /dev/null
+++ b/src/breadcrumb/breadcrumb_item.rs
@@ -0,0 +1,17 @@
+use super::use_breadcrumb_separator;
+use leptos::*;
+
+#[component]
+pub fn BreadcrumbItem(children: Children) -> impl IntoView {
+    let breadcrumb_separator = use_breadcrumb_separator();
+    view! {
+        <li class="thaw-breadcrumb-item">
+            <span class="thaw-breadcrumb-item__link">
+                {children()}
+            </span>
+            <span class="thaw-breadcrumb-item__separator">
+                {move || breadcrumb_separator.0.get()}
+            </span>
+        </li>
+    }
+}
diff --git a/src/breadcrumb/mod.rs b/src/breadcrumb/mod.rs
new file mode 100644
index 0000000..56aeced
--- /dev/null
+++ b/src/breadcrumb/mod.rs
@@ -0,0 +1,29 @@
+mod breadcrumb_item;
+
+pub use breadcrumb_item::BreadcrumbItem;
+use leptos::*;
+
+use crate::mount_style;
+
+#[component]
+pub fn Breadcrumb(
+    #[prop(default = MaybeSignal::Static("/".to_string()),into)] separator: MaybeSignal<String>,
+    children: Children,
+) -> impl IntoView {
+    mount_style("breadcrumb", include_str!("./breadcrumb.css"));
+    provide_context(BreadcrumbSeparatorInjection(separator));
+    view! {
+        <nav class="thaw-breadcrumb">
+            <ul>
+                {children()}
+            </ul>
+        </nav>
+    }
+}
+
+#[derive(Clone)]
+pub(crate) struct BreadcrumbSeparatorInjection(MaybeSignal<String>);
+
+pub(crate) fn use_breadcrumb_separator() -> BreadcrumbSeparatorInjection {
+    expect_context()
+}
diff --git a/src/lib.rs b/src/lib.rs
index 666a758..094e70f 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -2,6 +2,7 @@ mod alert;
 mod auto_complete;
 mod avatar;
 mod badge;
+mod breadcrumb;
 mod button;
 mod card;
 mod checkbox;
@@ -41,6 +42,7 @@ pub use alert::*;
 pub use auto_complete::*;
 pub use avatar::*;
 pub use badge::*;
+pub use breadcrumb::*;
 pub use button::*;
 pub use card::*;
 pub use checkbox::*;