bs5/universal/native/shared/Counter.re


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

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>;
  };
};