daisy_rsx 0.1.47

Daisy UI components for the Dioxus Rust library.
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

use dioxus::prelude::*;

#[component]
pub fn GraphSvg() -> Element {
    rsx! {
        svg {
            fill: "currentColor",
            width: "50",
            height: "50",
            view_box: "0 0 20 20",
            xmlns: "http://www.w3.org/2000/svg",
            path {
                fill_rule: "evenodd",
                d: "M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10
                15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 
                100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 
                00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z",
                clip_rule: "evenodd",
            }
        }
    }
}

#[derive(Clone, PartialEq)]
pub struct Feature {
    pub title: String,
    pub description: String,
}

#[component]
pub fn Features(
    features: Vec<Feature>,
    title: String,
    description: String,
    class: Option<String>,
) -> Element {
    let class = class.unwrap_or("".to_string());
    rsx! {
        section {
            class: format!("{class} body-font"),
            div {
                class: "mx-auto",
                div {
                    class: "mb-8 lg:mb-16",
                    h2 {
                        class: "mb-4 text-4xl tracking-tight text-primary",
                        "{title}"
                    }
                    p {
                        class: "text-gray-500 sm:text-xl dark:text-gray-400",
                        "{description}"
                    }
                }
                div {
                    class: "space-y-8 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-12 md:space-y-0",
                    for feature in features {
                        div {
                            div {
                                class: "mb-4 w-10 h-10 lg:h-12 lg:w-12",
                                GraphSvg {}
                            }
                            h3 {
                                class: "mb-2 text-primary text-xl font-bold",
                                "{feature.title}"
                            }
                            p {
                                "{feature.description}"
                            }
                        }
                    }
                }
            }
        }
    }
}