From a9616463b5cf1780ff891cb7f518bce88be14468 Mon Sep 17 00:00:00 2001
From: Daniel Sil <daniel.sil@kiwi.com>
Date: Wed, 15 Jan 2025 17:34:13 +0100
Subject: [PATCH] chore: add support for state in Playroom

---
 packages/orbit-components/playroom.config.js     | 15 ++++++++++++++-
 packages/orbit-components/playroomComponents.tsx |  2 ++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/orbit-components/playroom.config.js b/packages/orbit-components/playroom.config.js
index ea0374f0f5..4679ef6138 100644
--- a/packages/orbit-components/playroom.config.js
+++ b/packages/orbit-components/playroom.config.js
@@ -69,7 +69,20 @@ module.exports = {
   },
   exampleCode: `
   <div className="bg-white-normal p-300 h-screen">
-    <Button type="primary">Hello World</Button>
+    <Context>
+      {() => {
+        const [hasError, setHasError] = React.useState(false);
+
+        return (
+          <Button
+            onClick={() => setHasError(!hasError)}
+            type={hasError ? "critical" : "primary"}
+          >
+            {hasError ? "Ups, click again" : "Click Me"}
+          </Button>
+        );
+      }}
+    </Context>
   </div>
 `,
 };
diff --git a/packages/orbit-components/playroomComponents.tsx b/packages/orbit-components/playroomComponents.tsx
index c7a337ed6f..edacef2fe3 100644
--- a/packages/orbit-components/playroomComponents.tsx
+++ b/packages/orbit-components/playroomComponents.tsx
@@ -1,2 +1,4 @@
 // Re-export components from Orbit
 export * from "@kiwicom/orbit-components";
+
+export const Context = ({ children }) => children();