1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
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>;
};
|
