1 files changed, 89 insertions, 0 deletions
diff --git a/bs5/universal/native/shared/Debug_props.re b/bs5/universal/native/shared/Debug_props.re
new file mode 100644
index 0000000..49b4567
--- /dev/null
+++ b/bs5/universal/native/shared/Debug_props.re
@@ -0,0 +1,89 @@
+[@warning "-33"];
+
+open Melange_json.Primitives;
+
+[@react.client.component]
+let make =
+    (
+      ~string: string,
+      ~int: int=999999,
+      ~float: float,
+      ~bool_true: bool,
+      ~bool_false: bool,
+      ~string_list: list(string),
+      ~header: option(React.element),
+      ~children: React.element,
+      ~promise: Js.Promise.t(string),
+    ) => {
+  <code
+    className="inline-flex text-left items-center space-x-4 bg-stone-800 text-slate-300 rounded-lg p-4 pl-6">
+    <Stack gap=3>
+      {React.array([|
+        <Row gap=2>
+          {React.array([|
+            <span className="font-bold"> {React.string("string")} </span>,
+            <span> {React.string(string)} </span>
+          |])}
+        </Row>,
+        <Row gap=2>
+          {React.array([|
+            <span className="font-bold"> {React.string("int")} </span>,
+            <span> {React.int(int)} </span>
+          |])}
+        </Row>,
+        <Row gap=2>
+          {React.array([|
+            <span className="font-bold"> {React.string("float")} </span>,
+            <span> {React.float(float)} </span>
+          |])}
+        </Row>,
+        <Row gap=2>
+          {React.array([|
+            <span className="font-bold"> {React.string("bool_true")} </span>,
+            <span> {React.string(bool_true ? "true" : "false")} </span>
+          |])}
+        </Row>,
+        <Row gap=2>
+          {React.array([|
+            <span className="font-bold"> {React.string("bool_false")} </span>,
+            <span> {React.string(bool_false ? "true" : "false")} </span>
+          |])}
+        </Row>,
+        <Row gap=2>
+          {React.array([|
+            <span className="font-bold"> {React.string("string_list")} </span>,
+            <Row gap=2>
+              {string_list
+               |> Array.of_list
+               |> Array.map(item => <span key=item> {React.string(item)} </span>)
+               |> React.array}
+            </Row>
+          |])}
+        </Row>,
+        <Row gap=2>
+          {React.array([|
+            <span className="font-bold"> {React.string("React.element")} </span>,
+            children
+          |])}
+        </Row>,
+        <Row gap=2>
+          {React.array([|
+            <span className="font-bold">
+              {React.string("option(React.element)")}
+            </span>,
+            {switch (header) {
+             | Some(header) => <header> header </header>
+             | None => React.null
+             }}
+          |])}
+        </Row>,
+        <Row gap=2>
+          {React.array([|
+            <span className="font-bold"> {React.string("Promise")} </span>,
+            <Promise_renderer promise />
+          |])}
+        </Row>
+      |])}
+    </Stack>
+  </code>;
+};