From e85f943e1b72feaaf16c2ed19ce40ba79c107ce5 Mon Sep 17 00:00:00 2001
From: Michael Lohr <michael@lohr.dev>
Date: Fri, 13 Dec 2024 09:59:10 +0900
Subject: [PATCH] feat: add pause button to glazewm example

---
 examples/starter/styles.css        | 4 +++-
 examples/starter/with-glazewm.html | 8 ++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/examples/starter/styles.css b/examples/starter/styles.css
index 8c4d4ba5..c3344519 100644
--- a/examples/starter/styles.css
+++ b/examples/starter/styles.css
@@ -53,6 +53,7 @@ body,
 .logo,
 .binding-mode,
 .tiling-direction,
+.paused-button,
 .network,
 .memory,
 .cpu,
@@ -85,7 +86,8 @@ body,
 }
 
 .binding-mode,
-.tiling-direction {
+.tiling-direction,
+.paused-button {
   background: rgb(255 255 255 / 15%);
   color: rgb(255 255 255 / 90%);
   border-radius: 2px;
diff --git a/examples/starter/with-glazewm.html b/examples/starter/with-glazewm.html
index d17777d7..556dc62c 100644
--- a/examples/starter/with-glazewm.html
+++ b/examples/starter/with-glazewm.html
@@ -151,6 +151,14 @@
             <div className="right">
               {output.glazewm && (
                 <>
+                  {output.glazewm.isPaused && (
+                    <button
+                      className="paused-button"
+                      onClick={() => glazewm.runCommand('wm-toggle-pause')}
+                    >
+                      PAUSED
+                    </button>
+                  )}
                   {output.glazewm.bindingModes.map(bindingMode => (
                     <button
                       className="binding-mode"