Function App

src/app.rs:8–92

(cx: Scope)

const GITHUB_IMG: &'static str = wasm_or_else("github.svg", "public/github.svg");

pub fn App(cx: Scope) -> Element {
    let mut count = use_state(cx, || 0);
    let dioxus_hover = use_state(cx, || false);
    let dioxus_hover_animation = || if **dioxus_hover { "animate-dioxus" } else { "" };
    let tailwind_hover = use_state(cx, || false);
    let tailwind_hover_animation = || {
        if **tailwind_hover {
            "animate-tailwind"
        } else {
            ""
        }
    };

    let rsx = rsx!(
        div {
            class: "flex flex-col h-screen items-center",
            a {
                class: "absolute right-0 p-8",
                href: "https://github.com/lyonsyonii/dioxus-tailwindcss",
                target: "_blank",
                img {
                    class: "w-8 sm:w-16",
                    src: "{GITHUB_IMG}",
                }
            }
            div {
                class: "grid grid-cols-5 pb-16 px-8 sm:mt-60 mt-28 font-bold text-3xl sm:text-5xl gap-3",
                a {
                    class: "col-span-2 place-self-end mr-4 sm:mr-6 {dioxus_hover_animation()}",
                    href: "https://dioxuslabs.com",
                    target: "_blank",
                    onmouseenter: move |_| dioxus_hover.set(true),
                    onanimationend: move |_| dioxus_hover.set(false),
                    img {
                        class: "h-28 sm:h-44 hover:drop-shadow-blue transition-shadow",
                        src: "{DIOXUS_IMG}",
                    },
                }
                a {
                    class: "col-span-2 col-start-4 place-self-center {tailwind_hover_animation()}",
                    href: "https://tailwindcss.com",
                    target: "_blank",
                    onmouseenter: move |_| tailwind_hover.set(true),
                    onanimationend: move |_| tailwind_hover.set(false),
                    img {
                        class: "w-28 sm:w-44 hover:drop-shadow-blue transition-shadow",
                        src: "{TAILWIND_IMG}"
                    }
                }
                h1 {
                    class: "col-span-2 place-self-end",
                    "Dioxus"
                },
                h1 {
                    class: "place-self-center",
                    "❤️"
                },
                h1 {