From 826a30dc012a28d78e3049fd6649ea96d3eb609a Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Mon, 16 Oct 2023 15:10:55 +0800
Subject: [PATCH] feat: add Avatar component

---
 demo/src/app.rs              |  1 +
 demo/src/pages/avatar/mod.rs | 36 ++++++++++++++++++++++++++++++++++++
 demo/src/pages/components.rs | 14 ++++++++++----
 demo/src/pages/mod.rs        |  2 ++
 src/avatar/avatar.css        | 13 +++++++++++++
 src/avatar/mod.rs            | 30 ++++++++++++++++++++++++++++++
 src/lib.rs                   |  2 ++
 7 files changed, 94 insertions(+), 4 deletions(-)
 create mode 100644 demo/src/pages/avatar/mod.rs
 create mode 100644 src/avatar/avatar.css
 create mode 100644 src/avatar/mod.rs

diff --git a/demo/src/app.rs b/demo/src/app.rs
index 2a6cecd..f7dfc26 100644
--- a/demo/src/app.rs
+++ b/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/>
diff --git a/demo/src/pages/avatar/mod.rs b/demo/src/pages/avatar/mod.rs
new file mode 100644
index 0000000..b3b5648
--- /dev/null
+++ b/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>
+    }
+}
diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs
index 22382b4..d4f3346 100644
--- a/demo/src/pages/components.rs
+++ b/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(),
diff --git a/demo/src/pages/mod.rs b/demo/src/pages/mod.rs
index d674481..55dbe64 100644
--- a/demo/src/pages/mod.rs
+++ b/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::*;
diff --git a/src/avatar/avatar.css b/src/avatar/avatar.css
new file mode 100644
index 0000000..df0b9cd
--- /dev/null
+++ b/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);
+}
diff --git a/src/avatar/mod.rs b/src/avatar/mod.rs
new file mode 100644
index 0000000..d42db03
--- /dev/null
+++ b/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>
+    }
+}
diff --git a/src/lib.rs b/src/lib.rs
index 8ae04c6..9ad7bfb 100644
--- a/src/lib.rs
+++ b/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::*;