htmx-components 0.3.0

HTMX enabled components for Axum
Documentation 
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

use rscx::{component, html, props};

pub enum AlertKind {
    Error,
    Info,
    Success,
    Warning,
}

#[props]
pub struct AlertProps {
    #[builder(default=AlertKind::Error)]
    kind: AlertKind,

    #[builder(setter(into))]
    title: String,

    #[builder(setter(into), default)]
    class: String,

    #[builder(default)]
    children: String,
}

#[component]
pub fn Alert(props: AlertProps) -> String {
    let (bg_color, title_color, description_color) = match props.kind {
        AlertKind::Error => ("bg-red-50", "text-red-800", "text-red-700"),
        AlertKind::Info => ("bg-blue-50", "text-blue-800", "text-blue-700"),
        AlertKind::Warning => ("bg-yellow-50", "text-yellow-800", "text-yellow-700"),
        AlertKind::Success => ("bg-green-50", "text-green-800", "text-green-700"),
    };

    html! {
        <div class=format!("rounded-md {} p-4 {}", bg_color, props.class).trim()>
            <div class="flex">
                <div class="flex-shrink-0">
                    <AlertIcon kind=props.kind />
                </div>
                <div class="ml-3">
                    <h3 class=format!("text-sm font-medium {}", title_color)>{props.title}</h3>
                    {if !props.children.is_empty() {
                        html! {
                            <div class=format!("mt-2 text-sm {}", description_color)>{props.children}</div>
                        }
                    } else {
                        html! {
                            <></>
                        }
                    }}
                </div>
            </div>
        </div>
    }
}

#[component]
fn AlertIcon(kind: AlertKind) -> String {
    match kind {
        AlertKind::Error => html! {
            <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
            </svg>
        },
        AlertKind::Info => html! {
            <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
            </svg>
        },
        AlertKind::Success => html! {
            <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
            </svg>
        },
        AlertKind::Warning => html! {
            <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
            </svg>
        },
    }
}