feat: add Avatar component

demo/src/app.rs

@@ -27,6 +27,7 @@ pub fn App() -> impl IntoView {
                     <Route path="/alert" view=AlertPage/>
                     <Route path="/grid" view=GridPage/>
                     <Route path="/auto-complete" view=AutoCompletePage/>
+                    <Route path="/avatar" view=AvatarPage/>
                 </Route>
                 <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                 <Route path="/mobile/nav-bar" view=NavBarDemoPage/>

demo/src/pages/avatar/mod.rs

@@ -0,0 +1,36 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use melt_ui::*;
+use prisms::highlight_str;
+
+#[component]
+pub fn AvatarPage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Avatar"</h1>
+            <Demo>
+                <Space>
+                    <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg"/>
+                    <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" circle=true/>
+                    <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" size=50/>
+                </Space>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    <Space>
+                        <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg"/>
+                        <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" circle=true/>
+                        <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" size=50/>
+                    </Space>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}

demo/src/pages/components.rs

@@ -79,10 +79,16 @@ fn gen_menu_data() -> Vec<MenuGroupOption> {
     vec![
         MenuGroupOption {
             label: "Common Components".into(),
-            children: vec![MenuItemOption {
-                value: "button".into(),
-                label: "Button".into(),
-            }],
+            children: vec![
+                MenuItemOption {
+                    value: "avatar".into(),
+                    label: "Avatar".into(),
+                },
+                MenuItemOption {
+                    value: "button".into(),
+                    label: "Button".into(),
+                },
+            ],
         },
         MenuGroupOption {
             label: "Data Input Components".into(),

demo/src/pages/mod.rs

@@ -1,5 +1,6 @@
 mod alert;
 mod auto_complete;
+mod avatar;
 mod button;
 mod checkbox;
 mod color_picker;
@@ -22,6 +23,7 @@ mod toast;
 
 pub use alert::*;
 pub use auto_complete::*;
+pub use avatar::*;
 pub use button::*;
 pub use checkbox::*;
 pub use color_picker::*;

src/avatar/avatar.css

@@ -0,0 +1,13 @@
+.melt-avatar {
+    display: inline-block;
+    width: var(--size);
+    height: var(--size);
+    background-color: #f7f7f7;
+    border-radius: var(--border-radius);
+}
+
+.melt-avatar img {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--border-radius);
+}

src/avatar/mod.rs

@@ -0,0 +1,30 @@
+use crate::mount_style;
+use leptos::*;
+
+#[component]
+pub fn Avatar(
+    #[prop(optional, into)] src: MaybeSignal<String>,
+    #[prop(optional, into)] circle: MaybeSignal<bool>,
+    #[prop(default = MaybeSignal::Static(30), into)] size: MaybeSignal<i32>,
+) -> impl IntoView {
+    let css_vars = create_memo(move |_| {
+        let mut css_vars = String::new();
+        css_vars.push_str(&format!("--size: {}px;", size.get()));
+        css_vars.push_str(&format!(
+            "--border-radius: {};",
+            if circle.get() { "50%" } else { "3px" }
+        ));
+        css_vars
+    });
+    mount_style("avatar", include_str!("./avatar.css"));
+    view! {
+        <span class="melt-avatar" style=move || css_vars.get()>
+            {move || {
+                let src = src.get();
+                (!src.is_empty()).then(|| view! {
+                    <img src=src />
+                })
+            }}
+        </span>
+    }
+}

src/lib.rs

@@ -1,5 +1,6 @@
 mod alert;
 mod auto_complete;
+mod avatar;
 mod button;
 mod card;
 mod checkbox;
@@ -27,6 +28,7 @@ mod wave;
 
 pub use alert::*;
 pub use auto_complete::*;
+pub use avatar::*;
 pub use button::*;
 pub use card::*;
 pub use checkbox::*;