feat: Tab and Tabsbar components

crates/components/src/lib.rs

@@ -30,6 +30,7 @@ mod slider;
 mod snackbar;
 mod switch;
 mod table;
+mod tabs;
 mod theme;
 mod tile;
 mod tooltip;
@@ -64,6 +65,7 @@ pub use slider::*;
 pub use snackbar::*;
 pub use switch::*;
 pub use table::*;
+pub use tabs::*;
 pub use theme::*;
 pub use tile::*;
 pub use tooltip::*;

crates/components/src/tabs.rs

@@ -0,0 +1,103 @@
+use dioxus::prelude::*;
+use freya_elements::elements as dioxus_elements;
+use freya_hooks::{
+    use_activable_route, use_applied_theme, use_focus, use_platform, TabTheme, TabThemeWith,
+};
+use winit::window::CursorIcon;
+
+#[allow(non_snake_case)]
+#[component]
+pub fn TabsBar(children: Element) -> Element {
+    rsx!(
+        rect {
+            direction: "horizontal",
+            {children}
+        }
+    )
+}
+
+/// Current status of the Tab.
+#[derive(Debug, Default, PartialEq, Clone, Copy)]
+pub enum TabStatus {
+    /// Default state.
+    #[default]
+    Idle,
+    /// Mouse is hovering the button.
+    Hovering,
+}
+
+#[allow(non_snake_case)]
+#[component]
+pub fn Tab(children: Element, theme: Option<TabThemeWith>) -> Element {
+    let focus = use_focus();
+    let mut status = use_signal(TabStatus::default);
+    let platform = use_platform();
+    let is_active = use_activable_route();
+
+    let focus_id = focus.attribute();
+
+    let TabTheme {
+        background,
+        hover_background,
+        border_fill,
+        focus_border_fill,
+        padding,
+        width,
+        height,
+        font_theme,
+    } = use_applied_theme!(&theme, tab);
+
+    use_drop(move || {
+        if *status.read() == TabStatus::Hovering {
+            platform.set_cursor(CursorIcon::default());
+        }
+    });
+
+    let onmouseenter = move |_| {
+        platform.set_cursor(CursorIcon::Pointer);
+        status.set(TabStatus::Hovering);
+    };
+
+    let onmouseleave = move |_| {
+        platform.set_cursor(CursorIcon::default());
+        status.set(TabStatus::default());
+    };
+
+    let background = match *status.read() {
+        TabStatus::Hovering => hover_background,
+        TabStatus::Idle => background,
+    };
+    let border = if focus.is_selected() || is_active {
+        focus_border_fill
+    } else {
+        border_fill
+    };
+
+    rsx!(
+        rect {
+            onmouseenter,
+            onmouseleave,
+            focus_id,
+            width: "{width}",
+            height: "{height}",
+            focusable: "true",
+            overflow: "clip",
+            role: "tab",
+            color: "{font_theme.color}",
+            background: "{background}",
+            text_align: "center",
+            content: "fit",
+            rect {
+                padding: "{padding}",
+                main_align: "center",
+                cross_align: "center",
+                {children},
+            }
+            rect {
+                height: "2",
+                width: "fill-min",
+                background: "{border}"
+            }
+        }
+    )
+}

crates/devtools/src/lib.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 use dioxus_radio::prelude::*;
-use dioxus_router::prelude::*;
+use dioxus_router::prelude::{use_route, Outlet, Routable, Router};
 use freya_components::*;
 use freya_elements::elements as dioxus_elements;
 use freya_hooks::{use_init_theme, use_platform, DARK_THEME};
@@ -13,10 +13,8 @@ mod hooks;
 mod node;
 mod property;
 mod state;
-mod tab;
 mod tabs;
 
-use tab::*;
 use tabs::{layout::*, style::*, tree::*};
 
 /// Run the [`VirtualDom`] with a sidepanel where the devtools are located.
@@ -121,9 +119,16 @@ pub fn DevTools(props: DevToolsProps) -> Element {
 pub fn DevtoolsBar() -> Element {
     rsx!(
         TabsBar {
-            TabButton {
+            Link {
                 to: Route::DOMInspector { },
-                label: "Elements"
+                ActivableRoute {
+                    route: Route::DOMInspector { },
+                    Tab {
+                        label {
+                            "Elements"
+                        }
+                    }
+                }
             }
         }
         Outlet::<Route> {}
@@ -183,13 +188,27 @@ fn LayoutForNodeInspector(node_id: String) -> Element {
             width: "100%",
             height: "50%",
             TabsBar {
-                TabButton {
+                Link {
                     to: Route::NodeInspectorStyle { node_id: node_id.clone() },
-                    label: "Style"
+                    ActivableRoute {
+                        route: Route::NodeInspectorStyle { node_id: node_id.clone() },
+                        Tab {
+                            label {
+                                "Style"
+                            }
+                        }
+                    }
                 }
-                TabButton {
-                    to: Route::NodeInspectorLayout { node_id },
-                    label: "Layout"
+                Link {
+                    to: Route::NodeInspectorLayout { node_id: node_id.clone() },
+                    ActivableRoute {
+                        route: Route::NodeInspectorLayout { node_id },
+                        Tab {
+                            label {
+                                "Layout"
+                            }
+                        }
+                    }
                 }
             }
             Outlet::<Route> {}

crates/hooks/src/theming/dark.rs

@@ -183,4 +183,16 @@ pub const DARK_THEME: Theme = Theme {
         width: LIGHT_THEME.popup.width,
         height: LIGHT_THEME.popup.height,
     },
+    tab: TabTheme {
+        background: cow_borrowed!("rgb(35, 35, 35)"),
+        hover_background: cow_borrowed!("rgb(45, 45, 45)"),
+        font_theme: FontTheme {
+            color: cow_borrowed!("white"),
+        },
+        border_fill: cow_borrowed!("none"),
+        focus_border_fill: cow_borrowed!("rgb(110, 110, 110)"),
+        padding: LIGHT_THEME.button.padding,
+        width: LIGHT_THEME.button.width,
+        height: LIGHT_THEME.button.height,
+    },
 };

crates/hooks/src/theming/light.rs

@@ -183,4 +183,16 @@ pub const LIGHT_THEME: Theme = Theme {
         width: cow_borrowed!("350"),
         height: cow_borrowed!("200"),
     },
+    tab: TabTheme {
+        background: cow_borrowed!("rgb(245, 245, 245)"),
+        hover_background: cow_borrowed!("rgb(235, 235, 235)"),
+        font_theme: FontTheme {
+            color: cow_borrowed!("rgb(10, 10, 10)"),
+        },
+        border_fill: cow_borrowed!("none"),
+        focus_border_fill: cow_borrowed!("rgb(180, 180, 180)"),
+        padding: cow_borrowed!("8 16"),
+        width: cow_borrowed!("auto"),
+        height: cow_borrowed!("auto"),
+    },
 };

crates/hooks/src/theming/mod.rs

@@ -540,6 +540,22 @@ define_theme! {
     }
 }
 
+define_theme! {
+    %[component]
+    pub Tab {
+        %[cows]
+        background: str,
+        hover_background: str,
+        border_fill: str,
+        focus_border_fill: str,
+        width: str,
+        height: str,
+        padding: str,
+        %[subthemes]
+        font_theme: FontTheme,
+    }
+}
+
 #[derive(Clone, Debug, PartialEq, Eq)]
 pub struct Theme {
     pub name: &'static str,
@@ -571,6 +587,7 @@ pub struct Theme {
     pub menu_container: MenuContainerTheme,
     pub snackbar: SnackBarTheme,
     pub popup: PopupTheme,
+    pub tab: TabTheme,
 }
 
 impl Default for Theme {