From 69312f5133734237edaea6ca29e2de9bf3203050 Mon Sep 17 00:00:00 2001
From: polwex <polwex@sortug.com>
Date: Sun, 15 Jun 2025 01:44:45 +0700
Subject: checkpoint here...

---
 bs5/universal/native/shared/App.re | 102 +++++++++++++++++++++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 bs5/universal/native/shared/App.re

(limited to 'bs5/universal/native/shared/App.re')

diff --git a/bs5/universal/native/shared/App.re b/bs5/universal/native/shared/App.re
new file mode 100644
index 0000000..25c54e4
--- /dev/null
+++ b/bs5/universal/native/shared/App.re
@@ -0,0 +1,102 @@
+module Hr = {
+  [@react.component]
+  let make = () => {
+    <span
+      className={Cx.make([
+        "block",
+        "w-full",
+        "h-px",
+        Theme.background(Theme.Color.Gray4),
+      ])}
+    />;
+  };
+};
+
+module Title = {
+  type item = {
+    label: string,
+    link: string,
+  };
+
+  module Menu = {
+    [@react.component]
+    let make = () => {
+      let data = [|
+        {
+          label: "Documentation",
+          link: "https://github.com/ml-in-barcelona/server-reason-react",
+        },
+        {
+          label: "Issues",
+          link: "https://github.com/ml-in-barcelona/server-reason-react/issues",
+        },
+        {
+          label: "About",
+          link: "https://twitter.com/davesnx",
+        },
+      |];
+
+      <div
+        className={Cx.make([
+          "flex",
+          "items-center",
+          "justify-items-end",
+          "gap-4",
+        ])}>
+        {React.array(
+           Belt.Array.mapWithIndex(data, (key, item) =>
+             <div className={Cx.make(["block"])} key={Int.to_string(key)}>
+               <Link.Text href={item.link} target="_blank">
+                 {item.label}
+               </Link.Text>
+             </div>
+           ),
+         )}
+      </div>;
+    };
+  };
+
+  [@react.component]
+  let make = () => {
+    <section>
+      <div className="mb-4">
+        <h1
+          className={Cx.make([
+            "m-0",
+            "text-5xl",
+            "font-bold",
+            Theme.text(Theme.Color.Gray13),
+          ])}>
+          {React.string("Server Reason React")}
+        </h1>
+      </div>
+      <Menu />
+    </section>;
+  };
+};
+
+[@warning "-26-27-32"];
+
+[@react.component]
+let make = () => {
+  React.useEffect(() => {
+    Js.log("Client mounted");
+    None;
+  });
+
+  let (title, setTitle) = RR.useStateValue("Server Reason React");
+
+  let%browser_only onChangeTitle = e => {
+    let value = React.Event.Form.target(e)##value;
+    setTitle(value);
+  };
+
+  <DemoLayout background=Theme.Color.Gray2>
+    <Stack gap=8 justify=`start>
+      {React.array([|
+        <Title />,
+        <InputText value=title onChange=onChangeTitle />
+      |])}
+    </Stack>
+  </DemoLayout>;
+};
-- 
cgit v1.2.3