canonrs-server 0.1.0

CanonRS server-side rendering support
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
72
73
74
75
76
77
78
79
80

use leptos::prelude::*;
use super::{Stat, StatSize, StatTrend, StatAlign, StatHeader, StatBody, StatValue, StatLabel, StatDelta, StatIcon};

#[component]
pub fn BasicExample() -> impl IntoView {
    view! {
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem;">
            // Basic stat
            <Stat>
                <StatLabel>"Total Revenue"</StatLabel>
                <StatValue>"$45,231"</StatValue>
            </Stat>

            // With trend up
            <Stat trend=StatTrend::Increase>
                <StatLabel>"Active Users"</StatLabel>
                <StatBody>
                    <StatValue>"2,350"</StatValue>
                    <StatDelta>"+12%"</StatDelta>
                </StatBody>
            </Stat>

            // With trend down
            <Stat trend=StatTrend::Decrease>
                <StatLabel>"Bounce Rate"</StatLabel>
                <StatBody>
                    <StatValue>"3.2%"</StatValue>
                    <StatDelta>"-0.5%"</StatDelta>
                </StatBody>
            </Stat>

            // With icon
            <Stat>
                <StatHeader>
                    <StatIcon>"💰"</StatIcon>
                    <StatLabel>"Sales"</StatLabel>
                </StatHeader>
                <StatValue>"$12,234"</StatValue>
            </Stat>

            // Size variants
            <Stat size=StatSize::Sm>
                <StatLabel>"Small"</StatLabel>
                <StatValue>"123"</StatValue>
            </Stat>

            <Stat size=StatSize::Lg trend=StatTrend::Increase>
                <StatLabel>"Large"</StatLabel>
                <StatBody>
                    <StatValue>"45K"</StatValue>
                    <StatDelta>"+23%"</StatDelta>
                </StatBody>
            </Stat>

            // Center aligned
            <Stat align=StatAlign::Center>
                <StatLabel>"Centered"</StatLabel>
                <StatValue>"999"</StatValue>
            </Stat>

            // Loading state
            <Stat loading=true>
                <StatLabel>"Loading..."</StatLabel>
                <StatValue>"12345"</StatValue>
            </Stat>

            // Complete example
            <Stat size=StatSize::Lg trend=StatTrend::Increase>
                <StatHeader>
                    <StatIcon>"📈"</StatIcon>
                    <StatLabel>"Total Growth"</StatLabel>
                </StatHeader>
                <StatBody>
                    <StatValue>"$89,432"</StatValue>
                    <StatDelta>"+18.2%"</StatDelta>
                </StatBody>
            </Stat>
        </div>
    }
}