79 lines
3.0 KiB
Rust
79 lines
3.0 KiB
Rust
//! # Rust Letter Frontend
|
|
//!
|
|
//! Rendering functions for the site using [Dioxus](https://dioxuslabs.com/).
|
|
|
|
#![allow(non_snake_case)]
|
|
|
|
/// A module that handles the functions needed
|
|
/// to render the site.
|
|
pub mod web_app {
|
|
// import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types
|
|
pub use dioxus::prelude::*;
|
|
|
|
/// Renders the app and returns the rendered Element.
|
|
pub fn App(cx: Scope) -> Element {
|
|
cx.render(rsx!(
|
|
div {
|
|
class: "min-h-screen font-nerd bg-alice-werefox-grey-light dark:bg-alice-werefox-grey",
|
|
div {
|
|
class: "container space-y-4 mx-auto p-4",
|
|
AddHeart {},
|
|
MakePoem {},
|
|
}
|
|
}
|
|
))
|
|
}
|
|
|
|
fn AddHeart(cx: Scope) -> Element {
|
|
cx.render(rsx!(
|
|
div {
|
|
class: "flex justify-center py-8",
|
|
div {
|
|
class: "animate-growshrink",
|
|
div {
|
|
class: "relative h-48 w-48",
|
|
img {
|
|
src: "images/heart-icon.png",
|
|
alt: "logo",
|
|
fill: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
))
|
|
}
|
|
|
|
fn MakePoem(cx: Scope) -> Element {
|
|
let poem = include_str!("../../data/poem.txt").split("\n\n");
|
|
|
|
cx.render(rsx!(
|
|
div {
|
|
class: "flex-col space-y-4",
|
|
p {
|
|
class: "mx-auto max-w-fit flex justify-center bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-4 border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4",
|
|
"You are important and loved"
|
|
},
|
|
details {
|
|
class: "mx-auto max-w-fit space-y-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-4 border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4",
|
|
summary {
|
|
class: "flex justify-center border-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-4 border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4",
|
|
"Tell Me More"
|
|
},
|
|
div {
|
|
class: "font-nerd flex flex-col space-y-4 mx-4 py-4",
|
|
poem.map(|phrase| rsx!(
|
|
div {
|
|
phrase.lines().map(|line| rsx!(
|
|
p {
|
|
line
|
|
}
|
|
))
|
|
}
|
|
))
|
|
}
|
|
}
|
|
}
|
|
))
|
|
}
|
|
}
|