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

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! {