1  use crate::components::navbar::Navbar;
 2  use crate::Route;
 3  use crate::APIDAE_SYMBOL;
 4  use dioxus::prelude::*;
 5  use dioxus_router::{use_route, Outlet};
 6  use lucide_dioxus::{Github, Globe, Linkedin};
 7  use ui::components::toast::ToastProvider;
 8  
 9  #[component]
10  pub fn MainLayout() -> Element {
11      let route = use_route::<Route>();
12      let title = match route {
13          Route::Home { .. } => "Apidae Systems",
14          Route::Docs { .. } => "Apidae Systems - Docs",
15          Route::Err404 { .. } => "Apidae Systems - 404",
16          _ => "Apidae Systems",
17      };
18  
19      let chip_model = use_signal(String::new);
20      let heap_memory = use_signal(String::new);
21      let device_ctx = use_context_provider(|| crate::DeviceContext {
22          chip_model,
23          heap_memory,
24      });
25  
26      rsx! {
27          document::Title { "{title}" }
28          ToastProvider {
29          div { class: "min-h-screen relative flex flex-col",
30              Navbar {
31                  on_search: move |_| *crate::SHOW_COMMAND_PALETTE.write() = true,
32                  on_network: move |_| {
33                      *crate::SHOW_NETWORK_SHEET.write() = true;
34                  },
35                  chip_model: device_ctx.chip_model.read().clone(),
36                  heap_memory: device_ctx.heap_memory.read().clone(),
37              }
38  
39              main { class: "mx-auto w-[min(100%-24px,980px)] py-4 flex-1",
40                  Outlet::<Route> {}
41              }
42  
43              footer { class: "border-t border-border bg-background/60 backdrop-blur-md mt-8",
44                  div { class: "mx-auto w-[min(100%-24px,980px)] py-6 flex flex-col sm:flex-row items-center justify-between gap-4",
45                      div { class: "flex items-center gap-2 text-sm text-muted-foreground",
46                          img { class: "w-5 h-5", src: APIDAE_SYMBOL }
47                          "Apidae Systems"
48                      }
49                      div { class: "flex items-center gap-4",
50                          a {
51                              class: "text-muted-foreground hover:text-foreground transition-colors",
52                              href: "https://www.apidaesystems.ca",
53                              target: "_blank",
54                              title: "Website",
55                              Globe { class: "w-5 h-5" }
56                          }
57                          a {
58                              class: "text-muted-foreground hover:text-foreground transition-colors",
59                              href: "https://www.linkedin.com/company/apidae-systems/",
60                              target: "_blank",
61                              title: "LinkedIn",
62                              Linkedin { class: "w-5 h-5" }
63                          }
64                          a {
65                              class: "text-muted-foreground hover:text-foreground transition-colors",
66                              href: "https://github.com/apidae-systems",
67                              target: "_blank",
68                              title: "GitHub",
69                              Github { class: "w-5 h-5" }
70                          }
71                      }
72                  }
73              }
74          }
75          }
76      }
77  }