Centered the div and pretty language buttons

Signed-off-by: Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>
pull/7/head
Tuan-Dat Tran 2024-05-21 17:03:40 +02:00
parent 6ca89b3bd5
commit 0dd9cec4bd
6 changed files with 92 additions and 17 deletions

View File

@ -787,6 +787,20 @@ video {
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.rounded-md {
border-radius: 0.375rem;
}
.rounded-s-lg {
border-start-start-radius: 0.5rem;
border-end-start-radius: 0.5rem;
}
.rounded-e-lg {
border-start-end-radius: 0.5rem;
border-end-end-radius: 0.5rem;
}
.border { .border {
border-width: 1px; border-width: 1px;
} }
@ -972,6 +986,11 @@ video {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.pb-4 { .pb-4 {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -1128,6 +1147,12 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.grayscale { .grayscale {
--tw-grayscale: grayscale(100%); --tw-grayscale: grayscale(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@ -1161,6 +1186,11 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));
} }
.hover\:text-blue-700:hover {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
}
.hover\:underline:hover { .hover\:underline:hover {
text-decoration-line: underline; text-decoration-line: underline;
} }
@ -1170,6 +1200,15 @@ video {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
} }
.focus\:z-10:focus {
z-index: 10;
}
.focus\:text-blue-700:focus {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
}
.focus\:outline-none:focus { .focus\:outline-none:focus {
outline: 2px solid transparent; outline: 2px solid transparent;
outline-offset: 2px; outline-offset: 2px;
@ -1181,11 +1220,22 @@ video {
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
} }
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-cyan-300:focus { .focus\:ring-cyan-300:focus {
--tw-ring-opacity: 1; --tw-ring-opacity: 1;
--tw-ring-color: rgb(103 232 249 / var(--tw-ring-opacity)); --tw-ring-color: rgb(103 232 249 / var(--tw-ring-opacity));
} }
.focus\:ring-blue-700:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(29 78 216 / var(--tw-ring-opacity));
}
.group:hover .group-hover\:from-green-400 { .group:hover .group-hover\:from-green-400 {
--tw-gradient-from: #4ade80 var(--tw-gradient-from-position); --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position); --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
@ -1364,10 +1414,25 @@ video {
background-color: rgb(55 65 81 / var(--tw-bg-opacity)); background-color: rgb(55 65 81 / var(--tw-bg-opacity));
} }
.dark\:hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark\:focus\:text-white:focus {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark\:focus\:ring-cyan-800:focus { .dark\:focus\:ring-cyan-800:focus {
--tw-ring-opacity: 1; --tw-ring-opacity: 1;
--tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity)); --tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity));
} }
.dark\:focus\:ring-blue-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}
} }
@media (min-width: 768px) { @media (min-width: 768px) {

View File

@ -84,7 +84,7 @@ pub fn Card(prop: CardProp) -> Element {
Picture {src: "{prop.picture}"}, 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 } { prop.children }
} }
} }

View File

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

View File

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

View File

@ -4,10 +4,7 @@ use dioxus_sdk::{i18n::*, translate};
use crate::Route; use crate::Route;
pub fn Header() -> Element { pub fn Header() -> Element {
let mut i18 = use_i18(); let 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! { rsx! {
nav { nav {
@ -26,15 +23,28 @@ pub fn Header() -> Element {
li { HeaderLink { url: Route::Consulting {}, text: translate!(i18, "headers.consulting") } }, li { HeaderLink { url: Route::Consulting {}, text: translate!(i18, "headers.consulting") } },
li { HeaderLink { url: Route::Impressum {}, text: translate!(i18, "headers.about") } }, li { HeaderLink { url: Route::Impressum {}, text: translate!(i18, "headers.about") } },
}, },
ul { LanguageButtonGroup { },
button { onclick: change_to_english, label { { translate!(i18, "headers.language_buttons.english") } } },
button { onclick: change_to_german, label { { translate!(i18, "headers.language_buttons.german") } } }
}
} }
} }
} }
} }
#[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] #[component]
fn HeaderLink(url: Route, text: String) -> Element { fn HeaderLink(url: Route, text: String) -> Element {
rsx! { rsx! {

View File

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