feat: add divider component

demo/src/app.rs

@@ -30,6 +30,7 @@ pub fn App() -> impl IntoView {
                     <Route path="/avatar" view=AvatarPage/>
                     <Route path="/badge" view=BadgePage/>
                     <Route path="/card" view=CardPage/>
+                    <Route path="/divider" view=DividerPage/>
                 </Route>
                 <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                 <Route path="/mobile/nav-bar" view=NavBarDemoPage/>

demo/src/pages/components.rs

@@ -92,6 +92,10 @@ fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "card".into(),
                     label: "Card".into(),
                 },
+                MenuItemOption {
+                    value: "divider".into(),
+                    label: "Divider".into(),
+                },
             ],
         },
         MenuGroupOption {

demo/src/pages/divider/mod.rs

@@ -0,0 +1,32 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use melt_ui::*;
+use prisms::highlight_str;
+
+#[component]
+pub fn DividerPage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Checkbox"</h1>
+            <Demo>
+                "top"
+                <Divider />
+                "bottom"
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    "top"
+                    <Divider />
+                    "bottom"
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}

demo/src/pages/mod.rs

@@ -7,6 +7,7 @@ mod card;
 mod checkbox;
 mod color_picker;
 mod components;
+mod divider;
 mod grid;
 mod home;
 mod image;
@@ -32,6 +33,7 @@ pub use card::*;
 pub use checkbox::*;
 pub use color_picker::*;
 pub use components::*;
+pub use divider::*;
 pub use grid::*;
 pub use home::*;
 pub use image::*;

src/divider/divider.css

@@ -0,0 +1,13 @@
+
+.melt-divider {
+    position: relative;
+    display: flex;
+    width: 100%;
+    margin: 1.5rem 0;
+}
+
+.melt-divider__line {
+    background-color: #efeff5;
+    height: 1px;
+    width: 100%;
+}

src/divider/mod.rs

@@ -0,0 +1,13 @@
+use leptos::*;
+
+use crate::mount_style;
+
+#[component]
+pub fn Divider() -> impl IntoView {
+    mount_style("divider", include_str!("./divider.css"));
+    view! {
+        <div class="melt-divider">
+            <div class="melt-divider__line"></div>
+        </div>
+    }
+}

src/lib.rs

@@ -8,6 +8,7 @@ mod checkbox;
 mod code;
 mod color_picker;
 mod components;
+mod divider;
 mod grid;
 mod icon;
 mod image;
@@ -36,6 +37,7 @@ pub use card::*;
 pub use checkbox::*;
 pub use code::*;
 pub use color_picker::*;
+pub use divider::*;
 pub use grid::*;
 pub use icon::*;
 pub use image::*;