intigrate focus system with tui

examples/tui_buttons.rs

@@ -0,0 +1,59 @@
+#![allow(non_snake_case)]
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::tui::launch(app);
+}
+
+fn Button(cx: Scope) -> Element {
+    let state = use_state(&cx, || false);
+    let color = if *state.get() { "red" } else { "blue" };
+    let text = if *state.get() { "☐" } else { "☒" };
+
+    cx.render(rsx! {
+        div {
+            border_width: "1px",
+            width: "50%",
+            height: "100%",
+            background_color: "{color}",
+            justify_content: "center",
+            align_items: "center",
+            onkeydown: |_| state.modify(|s| !s),
+
+            "{text}"
+        }
+    })
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div {
+            width: "100%",
+            height: "100%",
+            flex_direction: "column",
+
+            div {
+                width: "100%",
+                height: "50%",
+                flex_direction: "row",
+
+                Button{},
+                Button{},
+                Button{},
+                Button{},
+            }
+
+            div {
+                width: "100%",
+                height: "50%",
+                flex_direction: "row",
+
+                Button{},
+                Button{},
+                Button{},
+                Button{},
+            }
+        }
+    })
+}