From 8d1665022a45352202904d9f47b3b30ef04d44eb Mon Sep 17 00:00:00 2001
From: Arthur Sonzogni <sonzogniarthur@gmail.com>
Date: Sun, 3 Sep 2023 16:21:13 +0200
Subject: [PATCH] List ftxui_CPUMeter (#744)

---
 README.md                     |  1 +
 examples/component/button.cpp | 43 +++++++++++++++++++++++++++--------
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 8d24ac4..3baf8af 100644
--- a/README.md
+++ b/README.md
@@ -325,6 +325,7 @@ Feel free to add your projects here:
 - [eCAL monitor](https://github.com/eclipse-ecal/ecal)
 - [Path Finder](https://github.com/Ruebled/Path_Finder)
 - [rw-tui](https://github.com/LeeKyuHyuk/rw-tui)
+- [ftxui_CPUMeter](https://github.com/tzzzzzzzx/ftxui_CPUMeter)
 
 ### [cpp-best-practices/game_jam](https://github.com/cpp-best-practices/game_jam)
 
diff --git a/examples/component/button.cpp b/examples/component/button.cpp
index 27439a3..0d2ab8f 100644
--- a/examples/component/button.cpp
+++ b/examples/component/button.cpp
@@ -12,28 +12,51 @@
 
 using namespace ftxui;
 
+// This is a helper function to create a button with a custom style.
+// The style is defined by a lambda function that takes an EntryState and
+// returns an Element.
+// We are using `center` to center the text inside the button, then `border` to
+// add a border around the button, and finally `flex` to make the button fill
+// the available space.
+ButtonOption ButtonStyle() {
+  auto option = ButtonOption::Animated();
+  option.transform = [](const EntryState& s) {
+    auto element = text(s.label);
+    if (s.focused) {
+      element |= bold;
+    }
+    return element | center | borderEmpty | flex;
+  };
+  return option;
+}
+
 int main() {
   int value = 50;
 
+
   // The tree of components. This defines how to navigate using the keyboard.
-  auto buttons = Container::Horizontal({
-      Button("Decrease", [&] { value--; }),
-      Button("Increase", [&] { value++; }),
-  });
+  auto buttons =
+    Container::Vertical({
+      Container::Horizontal({
+        Button("-1", [&] { value--; }, ButtonStyle()),
+        Button("+1", [&] { value++; }, ButtonStyle()),
+      }) | flex,
+      Container::Horizontal({
+        Button("-10", [&] { value -= 10; }, ButtonStyle()),
+        Button("-10", [&] { value += 10; }, ButtonStyle()),
+      }) | flex,
+    });
 
   // Modify the way to render them on screen:
   auto component = Renderer(buttons, [&] {
     return vbox({
                text("value = " + std::to_string(value)),
                separator(),
-               gauge(value * 0.01f),
-               separator(),
-               buttons->Render(),
-           }) |
-           border;
+               buttons->Render() | flex,
+           }) | flex | border;
   });
 
-  auto screen = ScreenInteractive::FitComponent();
+  auto screen = ScreenInteractive::Fullscreen();
   screen.Loop(component);
   return 0;
 }