daisy_rsx 0.1.37

Daisy UI components for the Dioxus Rust library.
Documentation
use dioxus::prelude::*;

#[component]
pub fn Testamonial(text: String, job: String, person: String, img: String) -> Element {
    rsx! {
        div {
            class: "h-full bg-base-200 p-8 rounded",
            svg {
                xmlns: "http://www.w3.org/2000/svg",
                fill: "currentColor",
                class: "block w-5 h-5 text-gray-400 mb-4",
                view_box: "0 0 975.036 975.036",
                path {
                    d: "M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"
                }
            }
            p {
                class: "leading-relaxed mb-6",
                "{text}"
            }
            a {
                class: "inline-flex items-center",
                img {
                    alt: "testimonial",
                    src: img,
                    class: "w-12 h-12 rounded-full flex-shrink-0 object-cover object-center",
                }
                span {
                    class: "flex-grow flex flex-col pl-4",
                    span {
                        class: "title-font font-medium text-gray-900",
                        "{person}"
                    }
                    span {
                        class: "text-gray-500 text-sm",
                        "{job}"
                    }
                }
            }
        }
    }
}

#[component]
pub fn Testamonials(
    text1: String,
    job1: String,
    person1: String,
    img1: String,
    text2: String,
    job2: String,
    person2: String,
    img2: String,
    class: Option<String>,
) -> Element {
    let class = class.unwrap_or("".to_string());
    rsx! {
        section {
            class: format!("mx-auto lg:max-w-5xl {class}"),
            div {
                class: "container mx-auto",
                h1 {
                    class: "text-3xl font-medium text-primary title-font mb-12 text-center",
                    "Testimonials"
                }
                div {
                    class: "md:flex gap-8",
                    div {
                        class: "md:w-1/2 w-full",
                        Testamonial {
                            person: person1,
                            text: text1,
                            job: job1,
                            img: img1
                        }
                    }
                    div {
                        class: "mt-5 md:md-0 md:w-1/2 w-full",
                        Testamonial {
                            person: person2,
                            text: text2,
                            job: job2,
                            img: img2
                        }
                    }
                }
            }
        }
    }
}