132 lines
3.4 KiB
Rust
132 lines
3.4 KiB
Rust
use dioxus::prelude::*;
|
|
use dioxus_sdk::{i18n::use_i18, translate};
|
|
|
|
#[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 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: "flex justify-between",
|
|
Picture {src: "{prop.picture}"},
|
|
}
|
|
}
|
|
H5 { "{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 {
|
|
let i18 = use_i18();
|
|
|
|
rsx! {
|
|
div {
|
|
class:"rounded flex 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:"flex items-center mx-auto",
|
|
p {
|
|
class:"flex items-center text-sm font-normal text-gray-500 dark:text-gray-400",
|
|
span { { translate!(i18, "components.under_construction") } }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
pub fn HR() -> Element {
|
|
rsx! {
|
|
hr { class:"h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"}
|
|
}
|
|
}
|