Added en-GB and de-DE

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

src/components/mod.rs

@@ -1,4 +1,5 @@
 use dioxus::prelude::*;
+use dioxus_sdk::{i18n::use_i18, translate};
 
 #[derive(PartialEq, Props, Clone)]
 pub struct PProps {
@@ -66,22 +67,49 @@ pub fn H5(props: PProps) -> Element {
 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",
+            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: "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 center",
-                { prop.children }
+                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",
@@ -89,9 +117,7 @@ pub fn UnderConstruction() -> Element {
                 class:"flex items-center mx-auto",
                 p {
                     class:"flex items-center text-sm font-normal text-gray-500 dark:text-gray-400",
-                    span {
-                        "This site is currenlty under construction",
-                    }
+                    span { { translate!(i18, "components.under_construction") } }
                 }
             }
         }