ccboard-web 0.12.0

Web frontend for ccboard using Leptos + Axum
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

//! Stats card component for dashboard

use leptos::prelude::*;

/// Card color variant
#[derive(Debug, Clone, Copy, PartialEq)]
pub enum CardColor {
    Default,
    Green,
    Yellow,
    Red,
}

impl CardColor {
    fn to_class(self) -> &'static str {
        match self {
            CardColor::Default => "",
            CardColor::Green => "card-green",
            CardColor::Yellow => "card-yellow",
            CardColor::Red => "card-red",
        }
    }
}

/// StatsCard component - displays a single metric with icon and label
#[component]
pub fn StatsCard(
    /// Card label (e.g., "Total Sessions")
    label: String,
    /// Card value (formatted, e.g., "1.2K")
    value: String,
    /// Icon emoji (e.g., "📊")
    icon: String,
    /// Color variant for status indication
    #[prop(default = CardColor::Default)]
    color: CardColor,
    /// Optional click handler for interactive cards
    #[prop(optional)]
    on_click: Option<Box<dyn Fn() + 'static>>,
) -> impl IntoView {
    let color_class = color.to_class();
    let is_clickable = on_click.is_some();

    let click_class = if is_clickable {
        "stats-card-clickable"
    } else {
        ""
    };

    let handle_click = move |_| {
        if let Some(ref handler) = on_click {
            handler();
        }
    };

    view! {
        <div
            class=format!("card stats-card {} {}", color_class, click_class)
            on:click=handle_click
        >
            <div class="stats-card-icon">{icon}</div>
            <div class="stats-card-content">
                <div class="stats-card-label">{label}</div>
                <div class="stats-card-value">{value}</div>
            </div>
            {is_clickable.then(|| view! {
                <div class="stats-card-action-hint">"Click to explore →"</div>
            })}
        </div>
    }
}