Source file skyline_placeholder_v2.ml

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
open! Core
open! Private_skyline_prelude

module Color = struct
  type t =
    [ `Default
    | Skyline_intent.t
    ]
end

module Style = struct
  let title_text_size = function
    | `Xs -> `Md
    | `Sm -> `Lg
    | `Md -> `Xl
    | `Lg -> `Two_xl
  ;;

  let container_gap_and_padding = function
    | `Xs -> Classes.[ gap 2.; p 1. ]
    | `Sm -> Classes.[ gap 3.; p 2. ]
    | `Md -> Classes.[ gap 4.; p 4. ]
    | `Lg -> Classes.[ gap 6.; p 6. ]
  ;;

  let icon_size = function
    | `Xs -> `Px 24
    | `Sm -> `Px 36
    | `Md -> `Px 48
    | `Lg -> `Px 64
  ;;

  let icon_color = function
    | `Default -> Colors.Text.default
    | `Primary -> Colors.Text.primary
    | `Secondary -> Colors.Text.secondary
    | `Success -> Colors.Text.success
    | `Danger -> Colors.Text.danger
    | `Warning -> Colors.Text.warning
  ;;
end

let view
  ?test_selector
  ?(attrs = [])
  ?(size = `Md)
  ?(color = `Default)
  ?icon
  ~title
  ~message
  actions
  =
  let icon_node =
    let%map.Option icon in
    {%html|
      <Bonsai_web_icon.view
        ~color:%{Style.icon_color color}
        ~icon
        ~stroke_width:%{`Px 1}
        ~size:%{Style.icon_size size}
      />
    |}
  in
  let actions_node =
    match actions with
    | [] -> None
    | actions ->
      Some
        {%html|<div *{Classes.[items_center; flex; flex_col; gap 2.]}>*{actions}</div>|}
  in
  {%html|
    <div
      *{Classes.[flex; flex_col; items_center; justify_center]}
      *{Style.container_gap_and_padding size}
      %{Test_selector.attr_of_opt test_selector}
      %{Classes.data_skyline_component "placeholder"}
      *{attrs}
    >
      ?{icon_node}
      <div *{Classes.[flex; flex_col; items_center; w_full]} style="text-align: center">
        <Skyline_text_v2.view
          ~color:%{color :> Skyline_text_v2.Color.t}
          ~size:%{Style.title_text_size size}
          %{Classes.font_bold}
          >#{title}</>
        <Skyline_text_v2.view
          ~size:%{size :> Skyline_text_v2.Size.t}
          ~color:%{`Secondary}
          >%{message}
        </>
      </div>
      ?{actions_node}
    </div>
  |}
;;

module For_docs = struct
  let ml_filepath = [%here].pos_fname
end