Centered the div and pretty language buttons

Signed-off-by: Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>

assets/tailwind.css

@@ -787,6 +787,20 @@ video {
   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-width: 1px;
 }
@@ -972,6 +986,11 @@ video {
   padding-bottom: 1rem;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .pb-4 {
   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);
 }
 
+.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 {
   --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);
@@ -1161,6 +1186,11 @@ video {
   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 {
   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);
 }
 
+.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 {
   outline: 2px solid transparent;
   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);
 }
 
+.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 {
   --tw-ring-opacity: 1;
   --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 {
   --tw-gradient-from: #4ade80 var(--tw-gradient-from-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));
   }
 
+  .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 {
     --tw-ring-opacity: 1;
     --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) {

src/components/mod.rs

@@ -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 }
         }
     }

src/languages/de-DE.json

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

src/languages/en-GB.json

@@ -8,14 +8,14 @@
       "consulting": "Consulting",
       "about": "About",
       "language_buttons": {
-        "english": "English",
+        "english": "🇬🇧 English",
-        "german": "German"
+        "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 ",

src/layout/header.rs

@@ -4,10 +4,7 @@ use dioxus_sdk::{i18n::*, translate};
 use crate::Route;
 
 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! {
         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 {
+                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]
 fn HeaderLink(url: Route, text: String) -> Element {
     rsx! {

src/main.rs

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