73 lines
1.7 KiB
Rust
73 lines
1.7 KiB
Rust
|
use leptos::prelude::*;
|
||
|
|
|
||
|
|
#[cfg(target_arch = "wasm32")]
|
||
|
|
use super::client::StatCardClient;
|
||
|
|
#[cfg(not(target_arch = "wasm32"))]
|
||
|
|
use super::ssr::StatCardSSR;
|
||
|
|
|
||
|
|
/// Statistics card component
|
||
|
|
///
|
||
|
|
/// Displays a key metric with optional trend indicator.
|
||
|
|
///
|
||
|
|
/// # Examples
|
||
|
|
///
|
||
|
|
/// ```rust
|
||
|
|
/// use leptos::prelude::*;
|
||
|
|
/// use vapora_leptos_ui::StatCard;
|
||
|
|
///
|
||
|
|
/// #[component]
|
||
|
|
/// fn Dashboard() -> impl IntoView {
|
||
|
|
/// view! {
|
||
|
|
/// <StatCard
|
||
|
|
/// label="Total Users"
|
||
|
|
/// value="1,234"
|
||
|
|
/// change=Some("+12%")
|
||
|
|
/// trend_positive=true
|
||
|
|
/// />
|
||
|
|
/// }
|
||
|
|
/// }
|
||
|
|
/// ```
|
||
|
|
#[component]
|
||
|
|
pub fn StatCard(
|
||
|
|
/// Label text for the statistic
|
||
|
|
label: String,
|
||
|
|
/// Main value to display
|
||
|
|
value: String,
|
||
|
|
/// Optional change indicator (e.g., "+12%", "-5%")
|
||
|
|
#[prop(optional)]
|
||
|
|
change: Option<String>,
|
||
|
|
/// Whether the change is positive (green) or negative (red)
|
||
|
|
#[prop(default = true)]
|
||
|
|
trend_positive: bool,
|
||
|
|
/// Optional icon or content to display
|
||
|
|
#[prop(optional)]
|
||
|
|
icon: Option<Children>,
|
||
|
|
/// Additional CSS classes
|
||
|
|
#[prop(default = "")]
|
||
|
|
class: &'static str,
|
||
|
|
) -> impl IntoView {
|
||
|
|
#[cfg(not(target_arch = "wasm32"))]
|
||
|
|
return view! {
|
||
|
|
<StatCardSSR
|
||
|
|
label=label
|
||
|
|
value=value
|
||
|
|
change=change
|
||
|
|
trend_positive=trend_positive
|
||
|
|
icon=icon
|
||
|
|
class=class
|
||
|
|
/>
|
||
|
|
};
|
||
|
|
|
||
|
|
#[cfg(target_arch = "wasm32")]
|
||
|
|
return view! {
|
||
|
|
<StatCardClient
|
||
|
|
label=label
|
||
|
|
value=value
|
||
|
|
change=change
|
||
|
|
trend_positive=trend_positive
|
||
|
|
icon=icon
|
||
|
|
class=class
|
||
|
|
/>
|
||
|
|
};
|
||
|
|
}
|