checkpoint here...

1 files changed, 50 insertions, 0 deletions

diff --git a/bs5/universal/native/shared/Counter.re b/bs5/universal/native/shared/Counter.re
new file mode 100644
index 0000000..4f8835d
--- /dev/null
+++ b/bs5/universal/native/shared/Counter.re
@@ -0,0 +1,50 @@
+open Melange_json.Primitives;
+
+[@react.client.component]
+let make = (~initial: int) => {
+  let (state, [@browser_only] setCount) = RR.useStateValue(initial);
+
+  let onClick = _ => {
+    switch%platform () {
+    | Client => setCount(state + 1)
+    | Server => ()
+    };
+  };
+
+  <Row align=`center gap=2>
+    {React.array([|
+      <Text color=Theme.Color.Gray11> "A classic counter" </Text>,
+      <button
+        onClick={e => onClick(e)}
+        className="cursor-pointer font-mono border-2 py-1 px-2 rounded-lg bg-yellow-950 border-yellow-700 text-yellow-200 hover:bg-yellow-800">
+        {React.string(Int.to_string(state))}
+      </button>
+    |])}
+  </Row>;
+};
+
+module Double = {
+  /* This component tests that client components can be nested in modules */
+  [@react.client.component]
+  let make = (~initial: int) => {
+    let (state, [@browser_only] setCount) = RR.useStateValue(initial);
+
+    let onClick = _ => {
+      switch%platform () {
+      | Client => setCount(state + 2)
+      | Server => ()
+      };
+    };
+
+    <Row align=`center gap=2>
+      {React.array([|
+        <Text color=Theme.Color.Gray11> "A classic counter" </Text>,
+        <button
+          onClick={e => onClick(e)}
+          className="cursor-pointer font-mono border-2 py-1 px-2 rounded-lg bg-yellow-950 border-yellow-700 text-yellow-200 hover:bg-yellow-800">
+          {React.string(Int.to_string(state))}
+        </button>
+      |])}
+    </Row>;
+  };
+};