tudattr/athome
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Centered the div and pretty language buttons

Browse Source 
Signed-off-by: Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>
This commit is contained in:
Tuan-Dat Tran
2024-05-21 17:03:40 +02:00
parent 6ca89b3bd5
commit 0dd9cec4bd
6 changed files with 92 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/mod.rs
View File

@@ -84,7 +84,7 @@ pub fn Card(prop: CardProp) -> Element {
Picture {src: "{prop.picture}"},
}
}
H5 { "{prop.name}", span { class: "text-grey-600 dark:text-grey-500 text-lg", " ({prop.gender})" } },
H5 { "{prop.name}", span { class: "text-grey-600 dark:text-grey-500 text-lg", " {prop.gender}" } },
{ prop.children }
}
}

4
src/languages/de-DE.json
View File

@@ -8,8 +8,8 @@
"consulting": "Consulting",
"about": "Impressum",
"language_buttons": {
"english": "Englisch",
"german": "Deutsch"
"english": "🇬🇧 Englisch",
"german": "🇩🇪 Deutsch"
}
},
"home": {

6
src/languages/en-GB.json
View File

@@ -8,14 +8,14 @@
"consulting": "Consulting",
"about": "About",
"language_buttons": {
"english": "English",
"german": "German"
"english": "🇬🇧 English",
"german": "🇩🇪 German"
}
},
"home": {
"card": {
"name": "Tuan-Dat Tran",
"gender": "He/Him",
"gender": "(He/Him)",
"l1": "Hey there! 👋🏻👋🏼👋🏽👋🏾👋🏿",
"l2": "Welcome to my little place on the internet.",
"l3": "While you're here, why don't you check out my projects over on ",

26
src/layout/header.rs
View File

@@ -4,10 +4,7 @@ use dioxus_sdk::{i18n::*, translate};
use crate::Route;
pub fn Header() -> Element {
let mut i18 = use_i18();
let change_to_english = move |_| i18.set_language("en-GB".parse().unwrap());
let change_to_german = move |_| i18.set_language("de-DE".parse().unwrap());
let i18 = use_i18();
rsx! {
nav {
@@ -26,15 +23,28 @@ pub fn Header() -> Element {
li { HeaderLink { url: Route::Consulting {}, text: translate!(i18, "headers.consulting") } },
li { HeaderLink { url: Route::Impressum {}, text: translate!(i18, "headers.about") } },
},
ul {
button { onclick: change_to_english, label { { translate!(i18, "headers.language_buttons.english") } } },
button { onclick: change_to_german, label { { translate!(i18, "headers.language_buttons.german") } } }
}
LanguageButtonGroup { },
}
}
}
}
#[component]
fn LanguageButtonGroup() -> Element {
let mut i18 = use_i18();
let change_to_english = move |_| i18.set_language("en-GB".parse().unwrap());
let change_to_german = move |_| i18.set_language("de-DE".parse().unwrap());
rsx! {
div {
class: "inline-flex rounded-md shadow-sm",
button { class: "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white", onclick: change_to_english, label { { translate!(i18, "headers.language_buttons.english") } } },
button { class: "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white", onclick: change_to_german, label { { translate!(i18, "headers.language_buttons.german") } } }
}
}
}
#[component]
fn HeaderLink(url: Route, text: String) -> Element {
rsx! {

6
src/main.rs
View File

@@ -92,8 +92,8 @@ pub struct BodyProp {
pub fn Body(prop: BodyProp) -> Element {
rsx! {
div {
class: "justify-center my-4",
{prop.children}
}
class: "my-4 flex justify-center",
{prop.children}
}
}
}