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
81
82
83
84
85
86
87
88

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

#[component]
pub fn StatShowcasePreview() -> impl IntoView {
    view! {
        <div data-rs-showcase-preview-hero="">
            <div data-rs-showcase-preview-stage="">
                <Stat size=StatSize::Lg trend=StatTrend::Increase>
                    <StatHeader>
                        <StatIcon>"📈"</StatIcon>
                        <StatLabel>"Total Revenue"</StatLabel>
                    </StatHeader>
                    <StatBody>
                        <StatValue>"$89,432"</StatValue>
                        <StatDelta>"+18.2%"</StatDelta>
                    </StatBody>
                </Stat>
            </div>
            <p data-rs-showcase-preview-anchor="">
                "Metric layout and semantics enforced via structured primitives."
            </p>
            <div data-rs-showcase-preview-section="">
                <span data-rs-showcase-preview-label="">"Trend variants"</span>
                <div data-rs-showcase-preview-row="">
                    <Stat trend=StatTrend::Increase>
                        <StatLabel>"Active Users"</StatLabel>
                        <StatBody>
                            <StatValue>"2,350"</StatValue>
                            <StatDelta>"+12%"</StatDelta>
                        </StatBody>
                    </Stat>
                    <Stat trend=StatTrend::Decrease>
                        <StatLabel>"Bounce Rate"</StatLabel>
                        <StatBody>
                            <StatValue>"3.2%"</StatValue>
                            <StatDelta>"-0.5%"</StatDelta>
                        </StatBody>
                    </Stat>
                    <Stat trend=StatTrend::Neutral>
                        <StatLabel>"Sessions"</StatLabel>
                        <StatBody>
                            <StatValue>"1,024"</StatValue>
                            <StatDelta>"0%"</StatDelta>
                        </StatBody>
                    </Stat>
                </div>
            </div>
            <div data-rs-showcase-preview-section="">
                <span data-rs-showcase-preview-label="">"Size variants"</span>
                <div data-rs-showcase-preview-row="">
                    <Stat size=StatSize::Sm>
                        <StatLabel>"Small"</StatLabel>
                        <StatValue>"123"</StatValue>
                    </Stat>
                    <Stat size=StatSize::Md>
                        <StatLabel>"Medium"</StatLabel>
                        <StatValue>"4,567"</StatValue>
                    </Stat>
                    <Stat size=StatSize::Lg>
                        <StatLabel>"Large"</StatLabel>
                        <StatValue>"89,432"</StatValue>
                    </Stat>
                </div>
            </div>
            <div data-rs-showcase-preview-section="">
                <span data-rs-showcase-preview-label="">"Align + Icon"</span>
                <div data-rs-showcase-preview-row="">
                    <Stat align=StatAlign::Center>
                        <StatLabel>"Centered"</StatLabel>
                        <StatValue>"999"</StatValue>
                    </Stat>
                    <Stat>
                        <StatHeader>
                            <StatIcon>"💰"</StatIcon>
                            <StatLabel>"Sales"</StatLabel>
                        </StatHeader>
                        <StatValue>"$12,234"</StatValue>
                    </Stat>
                </div>
            </div>
        </div>
    }
}