feat: add alert component

Cargo.toml

@@ -21,6 +21,9 @@ icondata = { version = "0.0.7", features = [
     "AiCheckOutlined",
     "AiLeftOutlined",
     "AiLoadingOutlined",
+    "AiCheckCircleFilled",
+    "AiExclamationCircleFilled",
+    "AiCloseCircleFilled"
 ] }
 
 [workspace]

demo/src/app.rs

@@ -24,6 +24,7 @@ pub fn App() -> impl IntoView {
                     <Route path="/space" view=SpacePage/>
                     <Route path="/table" view=TablePage/>
                     <Route path="/color-picker" view=ColorPickerPage/>
+                    <Route path="/alert" view=AlertPage/>
                 </Route>
                 <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                 <Route path="/mobile/nav-bar" view=NavBarDemoPage/>

demo/src/pages/alert/mod.rs

@@ -0,0 +1,34 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use melt_ui::*;
+use prisms::highlight_str;
+
+#[component]
+pub fn AlertPage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Alert"</h1>
+            <Demo>
+                <Space vertical=true>
+                    <Alert variant=AlertVariant::SUCCESS title="title">"success"</Alert>
+                    <Alert variant=AlertVariant::WARNING title="title">"warning"</Alert>
+                    <Alert variant=AlertVariant::ERROR title="title">"error"</Alert>
+                </Space>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                        <Alert variant=AlertVariant::SUCCESS title="title">"success"</Alert>
+                        <Alert variant=AlertVariant::WARNING title="title">"warning"</Alert>
+                        <Alert variant=AlertVariant::ERROR title="title">"error"</Alert>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}

demo/src/pages/components.rs

@@ -43,6 +43,7 @@ pub fn ComponentsPage() -> impl IntoView {
                             <MenuItem key="space" label="Space"/>
                             <MenuItem key="table" label="Table"/>
                             <MenuItem key="color-picker" label="Color Picker"/>
+                            <MenuItem key="alert" label="Alert"/>
                         </MenuGroup>
                         <MenuGroup label="Mobile Components">
                             <MenuItem key="tabbar" label="Tabbar"/>

demo/src/pages/mod.rs

@@ -1,3 +1,4 @@
+mod alert;
 mod button;
 mod checkbox;
 mod color_picker;
@@ -17,6 +18,7 @@ mod table;
 mod tabs;
 mod toast;
 
+pub use alert::*;
 pub use button::*;
 pub use checkbox::*;
 pub use color_picker::*;

src/alert/alert.css

@@ -0,0 +1,21 @@
+.melt-alert {
+    position: relative;
+    padding: 14px 20px 14px 42px;
+    background-color: var(--background-color);
+    border: 1px solid var(--border-color);
+    border-radius: 3px;
+}
+
+.melt-alert__icon {
+    position: absolute;
+    top: 12px;
+    left: 8px;
+}
+
+.melt-alert__header {
+    font-size: 16px;
+}
+
+.melt-alert__header + .alert-body__content {
+    margin-top: 8px;
+}

src/alert/mod.rs

@@ -0,0 +1,79 @@
+use crate::{theme::use_theme, utils::mount_style::mount_style, Icon, Theme};
+use icondata::AiIcon;
+use leptos::*;
+
+#[derive(Clone)]
+pub enum AlertVariant {
+    SUCCESS,
+    WARNING,
+    ERROR,
+}
+
+impl AlertVariant {
+    pub fn theme_border_color(&self, theme: &Theme) -> String {
+        match self {
+            AlertVariant::SUCCESS => theme.common.color_success.clone(),
+            AlertVariant::WARNING => theme.common.color_warning.clone(),
+            AlertVariant::ERROR => theme.common.color_error.clone(),
+        }
+    }
+}
+
+#[component]
+pub fn Alert(
+    #[prop(optional, into)] title: MaybeSignal<String>,
+    #[prop(into)] variant: MaybeSignal<AlertVariant>,
+    children: Children,
+) -> impl IntoView {
+    mount_style("alert", include_str!("./alert.css"));
+    let theme = use_theme(Theme::light);
+
+    let css_vars = create_memo({
+        let variant = variant.clone();
+
+        move |_| {
+            let mut css_vars = String::new();
+
+            theme.with(|theme| {
+                let variant = variant.get();
+                let border_color = variant.theme_border_color(&theme);
+                css_vars.push_str(&format!("--background-color: {border_color}aa;"));
+                css_vars.push_str(&format!("--border-color: {border_color};"));
+            });
+
+            css_vars
+        }
+    });
+    let icon = create_memo(move |_| {
+        match variant.get() {
+            AlertVariant::SUCCESS => AiIcon::AiCheckCircleFilled,
+            AlertVariant::WARNING => AiIcon::AiExclamationCircleFilled,
+            AlertVariant::ERROR => AiIcon::AiCloseCircleFilled,
+        }
+        .into()
+    });
+    view! {
+        <div class="melt-alert" style=move || css_vars.get()>
+            <Icon icon class="melt-alert__icon"/>
+            <div>
+                {
+                    move || {
+                        let title = title.get();
+                        if title.is_empty() {
+                            None
+                        } else {
+                            view! {
+                                <div class="melt-alert__header">
+                                    {title}
+                                </div>
+                            }.into()
+                        }
+                    }
+                }
+                <div class="melt-alert-body__content">
+                    { children() }
+                </div>
+            </div>
+        </div>
+    }
+}

src/lib.rs

@@ -1,3 +1,4 @@
+mod alert;
 mod button;
 mod card;
 mod checkbox;
@@ -22,6 +23,7 @@ mod theme;
 mod utils;
 mod wave;
 
+pub use alert::*;
 pub use button::*;
 pub use card::*;
 pub use checkbox::*;