ansible/src/components/mod.rs

use dioxus::prelude::*;
use dioxus_i18n::t;

#[derive(PartialEq, Props, Clone)]
pub struct PProps {
    #[props(default = "".to_string())]
    pub class: String,
    pub children: Element,
}

#[component]
pub fn P(props: PProps) -> Element {
    rsx! {
        div {
            class: "{props.class}",
            p {
                class: "mb-2 font-normal text-gray-900 dark:text-white",
                {props.children}
            },
        }
    }
}

#[component]
pub fn Title(props: PProps) -> Element {
    rsx! {
        div {
            class: "{props.class}",
            h1 {
                class: "mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white",
                {props.children}
            }
        }
    }
}

#[component]
pub fn H1(props: PProps) -> Element {
    rsx! {
        div {
            class: "{props.class}",
            h1 {
                class: "mb-4 text-3xl font-extrabold text-gray-900 dark:text-white md:text-5xl lg:text-6xl",
                span {
                    class: "text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400",
                    {props.children}
                }
            }
        }
    }
}

pub fn H4(props: PProps) -> Element {
    rsx! {
        div {
            class: "{props.class}",
            class: "mb-4",
            h3 {
                class: "text-lg uppercase text-cyan-600 dark:text-cyan-400 tracking-widest mb-4 font-bold",
                {props.children}
            }
        }
    }
}

#[component]
pub fn H5(props: PProps) -> Element {
    rsx! {
        div {
            class: "{props.class}",
            h5 {
                class: "mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white",
                {props.children}
            }
        }
    }
}

#[derive(PartialEq, Props, Clone)]
pub struct CardProp {
    #[props(default = "".to_string())]
    class: String,
    name: String,
    gender: String,
    picture: String,
    children: Element,
}

pub fn Card(prop: CardProp) -> Element {
    rsx! {
        div {
            class: "flex flex-col py-10 items-center min-w-fit text-white bg-gradient-to-r from-purple-500 to-blue-500 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 rounded-lg px-5 py-2.5 min-w-fit max-w-8",
            div {
                class: "pb-4",
                div {
                    class: "justify-between",
                    Picture {src: "{prop.picture}"},
                }
            }
            Title { "{prop.name}", span { class: "text-grey-600 dark:text-grey-500 text-lg", " {prop.gender}" } },
            { prop.children }
        }
    }
}

#[derive(PartialEq, Props, Clone)]
struct PictureProp {
    #[props(default = "".to_string())]
    class: String,
    src: String,
}

fn Picture(prop: PictureProp) -> Element {
    rsx! {
        img {
            class: "w-24 h-24 rounded-full shadow-lg",
            src: "{prop.src}",
            alt: "",
        },
    }
}

pub fn UnderConstruction() -> Element {
    rsx! {
        div {
            class:"rounded justify-between w-full p-4 border-b border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600 my-8",
            div {
                class:"items-center mx-auto",
                p {
                    class:"items-center text-sm font-normal text-gray-500 dark:text-gray-400",
                    span { { t!("component_under_construction") } }
                }
            }
        }
    }
}

pub fn HR() -> Element {
    rsx! {
        hr { class:"h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"}
    }
}

#[derive(Clone, PartialEq, Props)]
pub struct BoldingProp {
    authors: String,
    patterns: Vec<String>,
}

pub fn Bolding(prop: BoldingProp) -> Element {
    let mut elements = vec![];
    let mut last_index = 0;
    let authors_text = &prop.authors;

    let mut matches: Vec<(usize, usize, &str)> = vec![];

    for pattern in &prop.patterns {
        for (start, _) in authors_text.match_indices(pattern) {
            matches.push((start, start + pattern.len(), pattern));
        }
    }

    matches.sort_by_key(|(start, _, _)| *start);

    for (start, end, matched_pattern) in matches {
        if last_index < start {
            elements.push(rsx! { "{&authors_text[last_index..start]}" });
        }

        elements.push(rsx! { b { "{matched_pattern}" } });
        last_index = end;
    }

    if last_index < authors_text.len() {
        elements.push(rsx! { "{&authors_text[last_index..]}" });
    }

    rsx! {
        div {
            P {
                for i in elements {
                    {i}
                }
            }
        }
    }
}

#[derive(Clone, PartialEq, Props)]
pub struct UrlingProp {
    #[props(default = "".to_string())]
    class: String,
    text: String,
    patterns: Vec<String>,
    url: String,
    #[props(default = true)]
    new_tab: bool,
}

pub fn Urling(prop: UrlingProp) -> Element {
    let mut elements = vec![];
    let mut last_index = 0;
    let text = &prop.text;

    let mut matches: Vec<(usize, usize, &str)> = vec![];

    for pattern in &prop.patterns {
        for (start, _) in text.match_indices(pattern) {
            matches.push((start, start + pattern.len(), pattern));
        }
    }

    matches.sort_by_key(|(start, _, _)| *start);

    for (start, end, matched_pattern) in matches {
        if last_index < start {
            elements.push(rsx! { "{&text[last_index..start]}" });
        }

        elements.push(rsx! {
                Link {
                class: "{prop.class}",
                to: "{prop.url}",
                new_tab: prop.new_tab,
                "{matched_pattern}"
            }
        });
        last_index = end;
    }

    if last_index < text.len() {
        elements.push(rsx! { "{&text[last_index..]}" });
    }

    rsx! {
        div {
            P {
                for i in elements {
                    {i}
                }
            }
        }
    }
}