Initial commit

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

src/layout/footer.rs

@@ -0,0 +1,76 @@
+use dioxus::prelude::*;
+
+use crate::components::H1;
+
+pub fn Footer() -> Element {
+    rsx! {
+        div {
+            ToolsUsed {},
+            footer {
+                class:"bg-white rounded-lg shadow dark:bg-gray-800 my-4:wa
+    ",
+                div {
+                    class:"w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between",
+                    span {
+                        class:"text-sm text-gray-500 sm:text-center dark:text-gray-400",
+                        "© 2024 ",
+                        a { href: "#",  class: "hover:underline", "Tuan-Dat Tran"},
+                        ". All Rights Reserved."
+                    }
+                    ul {
+                        class:"flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0",
+                        li {
+                            Link { to:"mailto:tuan-dat.tran@tudattr.dev", class:"hover:underline", "Contact" }
+                        },
+                    }
+                }
+            }
+        }
+    }
+}
+
+fn ToolsUsed() -> Element {
+    rsx! {
+        div {
+            class:"items-center bg-white rounded-lg shadow dark:bg-gray-800 p-4 my-4",
+            div {
+                H1 {class: "justify-center", "Tools used" },
+            }
+            div {
+                class: "flex h-fill overflow-x-auto",
+                Logo {
+                    src: "https://raw.githubusercontent.com/SAWARATSUKI/ServiceLogos/main/Rust/Rust.png",
+                    alt: "Rust"
+                },
+                Logo {
+                    src: "https://raw.githubusercontent.com/SAWARATSUKI/ServiceLogos/main/Tailwindcss/Tailwindcss6.png",
+                    alt: "Tailwindcss"
+                },
+                Logo {
+                    src: "https://raw.githubusercontent.com/SAWARATSUKI/ServiceLogos/main/Html/HTML.png",
+                    alt: "HTML"
+                },
+                Logo {
+                    src: "https://raw.githubusercontent.com/Aikoyori/ProgrammingVTuberLogos/main/Docker/DockerLogo.png",
+                    alt: "Docker"
+                },
+                Logo {
+                    src: "https://raw.githubusercontent.com/Aikoyori/ProgrammingVTuberLogos/main/Neovim/NeovimLogo.png",
+                    alt: "NeoVim"
+                },
+
+            }
+        }
+    }
+}
+
+#[component]
+fn Logo(src: String, alt: String) -> Element {
+    rsx! {
+        img {
+            class: "h-auto max-w-40 transition-all duration-300 rounded-lg cursor-pointer filter grayscale hover:grayscale-0",
+            src: "{src}",
+            alt: "{alt}"
+        }
+    }
+}

src/layout/header.rs

@@ -0,0 +1,41 @@
+use dioxus::prelude::*;
+
+use crate::Route;
+
+pub fn Header() -> Element {
+    rsx! {
+        nav {
+            div { class:" flex flex-wrap items-center justify-between mx-auto p-4",
+                Link {
+                    to: Route::Home {},
+                    class:"flex items-center space-x-3 rtl:space-x-reverse",
+                    img { src:"/pictures/ClackCat_t.webp", class:"rounded-full h-8", alt:"Flowbite Logo" },
+                    span { class:"self-center text-2xl font-semibold whitespace-nowrap dark:text-white", "" }
+                }
+                button {
+                    r#type:"button",
+                    class:"inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
+                    aria_controls:"navbar-default",
+                    aria_expanded:"false",
+                    span { class:"sr-only", "Open main menu" },
+                }
+                div { class:"hidden w-full md:block md:w-auto", id:"navbar-default",
+                    ul { class:"font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700",
+                        li {
+                            Link { to: Route::Home {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "Home" }
+                        }
+                        li {
+                            Link { to: Route::CV {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "CV" }
+                        }
+                        li {
+                            Link { to: Route::Publications {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "Publications/Projects" }
+                        }
+                        li {
+                            Link { to: Route::Impressum {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "About" }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/layout/mod.rs

@@ -0,0 +1,24 @@
+use dioxus::prelude::*;
+
+mod footer;
+mod header;
+
+use crate::{Body, Route};
+use footer::Footer;
+use header::Header;
+
+pub fn Layout() -> Element {
+    rsx! {
+        div {
+            class: "flex justify-center",
+            div {
+                class: "max-w-screen-xl flex-col" ,
+                Header {},
+                Body {
+                    Outlet::<Route> {},
+                }
+                Footer {},
+            }
+        }
+    }
+}