✨ feat: add code component

gh-pages/Cargo.toml

@@ -10,7 +10,12 @@ leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", fea
     "stable",
 ] }
 melt-ui = { path = "../" }
-leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "9d52325", features = ["AiCloseOutlined", "AiCheckOutlined"] }
-leptos_router = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = ["csr"] }
-
-regex = "1.8.2"
+leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "9d52325", features = [
+    "AiCloseOutlined",
+    "AiCheckOutlined",
+] }
+leptos_router = { git = "https://github.com/leptos-rs/leptos.git", rev = "3a570dc", features = [
+    "csr",
+] }
+indoc = "2.0.1"
+regex = "1.8.2"

gh-pages/src/pages/components.rs

@@ -49,7 +49,7 @@ pub fn ComponentsPage(cx: Scope) -> impl IntoView {
                         <MenuItem key="tabs" label="tabs" />
                     </Menu>
                 </LayoutSider>
-                <Layout>
+                <Layout style="padding: 8px 12px 28px">
                     <Outlet />
                 </Layout>
             </Layout>

gh-pages/src/pages/menu/mod.rs

@@ -1,3 +1,4 @@
+use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
 
@@ -5,12 +6,26 @@ use melt_ui::*;
 pub fn MenuPage(cx: Scope) -> impl IntoView {
     let selected = create_rw_signal(cx, String::from("o"));
     view! { cx,
-        <div>
+        <Card>
             { move || selected.get() }
             <Menu selected>
                 <MenuItem key="a" label="and"/>
                 <MenuItem key="o" label="or"/>
             </Menu>
-        </div>
+            <CardFooter slot>
+                <Code>
+                    <pre>
+                        {
+                            indoc!(r#"
+                            <Menu selected>
+                                <MenuItem key="a" label="and"/>
+                                <MenuItem key="o" label="or"/>
+                            </Menu>
+                            "#)
+                        }
+                    </pre>
+                </Code>
+            </CardFooter>
+        </Card>
     }
 }

src/card/mod.rs

@@ -40,7 +40,7 @@ pub fn Card(
     view! {
         cx, class=class_name,
         <div class="melt-card">
-                <If cond=MaybeSignal::derive(cx, move || is_header || title.get().is_empty())  >
+                <If cond=MaybeSignal::derive(cx, move || is_header || !title.get().is_empty())  >
                     <Then slot>
                         <div class="melt-card__header">
                             <div class="melt-card__header-content">

src/code/mod.rs

@@ -0,0 +1,10 @@
+use leptos::*;
+
+#[component]
+pub fn Code(cx: Scope, children: Children) -> impl IntoView {
+    view! { cx,
+        <code class="melt-code">
+            { children(cx) }
+        </code>
+    }
+}

src/lib.rs

@@ -1,6 +1,7 @@
 mod button;
 mod card;
 mod checkbox;
+mod code;
 mod components;
 mod image;
 mod input;
@@ -19,7 +20,9 @@ mod utils;
 mod wave;
 
 pub use button::*;
+pub use card::*;
 pub use checkbox::*;
+pub use code::*;
 pub use image::*;
 pub use input::*;
 pub use layout::*;
@@ -28,7 +31,7 @@ pub use modal::*;
 pub use progress::*;
 pub use slider::*;
 pub use space::*;
-pub use tabs::*;
 pub use table::*;
+pub use tabs::*;
 pub use theme::Theme;
 pub use wave::*;