ansible/src/publications.rs

use dioxus::prelude::*;
use dioxus_sdk::{i18n::use_i18, translate};

use crate::components::{UnderConstruction, H1, HR};

#[component]
pub fn PublicationsProjects() -> Element {
    let i18 = use_i18();

    rsx! {
        div {
            class: "flex flex-col ",
            UnderConstruction { },
            div {
                H1 { { translate!(i18, "publications_projects.publications.title") } }
                Publications { },
            },
            HR {},
            div {
                H1 { { translate!(i18, "publications_projects.projects.title") } }
                Projects { },
            }
        }
    }
}

#[derive(Clone, PartialEq, Props)]
struct PublicationProp {
    #[props(default = "".to_string())]
    doi: String,
    authors: String,
    title: String,
    conference: String,
    #[props(default = "".to_string())]
    description: String,
}

fn Publications() -> Element {
    let i18 = use_i18();

    rsx! {
        div {
            class: "flex gap-4 items-center flex-wrap",
            Publication {
                title: translate!(i18, "publications_projects.publications.rpm.title"),
                authors: translate!(i18, "publications_projects.publications.rpm.authors"),
                conference: translate!(i18, "publications_projects.publications.rpm.conference"),
                doi: translate!(i18, "publications_projects.publications.rpm.url"),
                description: translate!(i18, "publications_projects.publications.rpm.description")
            },

            Publication {
                title: translate!(i18, "publications_projects.publications.iot_fuzzers.title"),
                authors: translate!(i18, "publications_projects.publications.iot_fuzzers.authors"),
                conference: translate!(i18, "publications_projects.publications.iot_fuzzers.conference"),
                doi: translate!(i18, "publications_projects.publications.iot_fuzzers.url"),
                description: translate!(i18, "publications_projects.publications.iot_fuzzers.description")
            },
        }
    }
}
fn Publication(prop: PublicationProp) -> Element {
    rsx! {
        Link {
            class:"block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700",
            to:"{prop.doi}",
            new_tab: true,
            h5 {
                class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white",
                "{prop.title}",
            },
            span { class: "text-lg text-gray-900 dark:text-white", "{prop.conference}" },
            p {
                class:"font-normal text-gray-700 dark:text-gray-400",
                "{prop.authors}",
            }
            p {
                class:"font-normal text-gray-700 dark:text-gray-400",
                "{prop.description}",
            }
        }
    }
}

fn Projects() -> Element {
    let i18 = use_i18();

    rsx! {
        div {
            class: "flex gap-4 items-center flex-wrap",
            Project {
                title: translate!(i18, "publications_projects.projects.bachelorproject.title"),
                authors: translate!(i18, "publications_projects.projects.bachelorproject.authors"),
                kind: translate!(i18, "publications_projects.projects.bachelorproject.kind"),
                url: translate!(i18, "publications_projects.projects.bachelorproject.url"),
                description: translate!(i18, "publications_projects.projects.bachelorproject.description")
            },
            Project {
                title: translate!(i18, "publications_projects.projects.dotfiles.title"),
                authors: translate!(i18, "publications_projects.projects.dotfiles.authors"),
                kind: translate!(i18, "publications_projects.projects.dotfiles.kind"),
                url: translate!(i18, "publications_projects.projects.dotfiles.url"),
                description: translate!(i18, "publications_projects.projects.dotfiles.description")
            },
            Project {
                title: translate!(i18, "publications_projects.projects.homelab.title"),
                authors: translate!(i18, "publications_projects.projects.homelab.authors"),
                kind: translate!(i18, "publications_projects.projects.homelab.kind"),
                url: translate!(i18, "publications_projects.projects.homelab.url"),
                description: translate!(i18, "publications_projects.projects.homelab.description")
            }
        }
    }
}

#[derive(Clone, PartialEq, Props)]
struct ProjectProp {
    #[props(default = "".to_string())]
    url: String,
    authors: String,
    title: String,
    kind: String,
    #[props(default = "".to_string())]
    description: String,
}

fn Project(prop: ProjectProp) -> Element {
    rsx! {
        Link {
            class:"block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700",
            to:"{prop.url}",
            new_tab: true,
            h5 {
                class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white",
                "{prop.title}",
            },
            p { class: "text-lg text-gray-900 dark:text-white", "{prop.kind}" },
            p {
                class:"font-normal text-gray-700 dark:text-gray-400",
                "{prop.authors}",
            }
            p {
                class:"font-normal text-gray-700 dark:text-gray-400",
                "{prop.description}",
            }
        }
    }
}