8bit.lol
forked from
futur.blue/pegasus
objective categorical abstract machine language personal data server
futur.blue
1open React
2
3(* putting this inline messes with ocamlformat-mlx *)
4let req_marker = " *"
5
6let[@react.component] make ?id ~name ?(className = "") ?(type_ = "text") ?label
7 ?(sr_only = false) ?value ?defaultValue ?placeholder ?autoComplete
8 ?(required = false) ?(disabled = false) ?trailing ?(showIndicator = true)
9 ?onChange () =
10 let id = Option.value id ~default:name in
11 let placeholder = if label <> None && sr_only then label else placeholder in
12 let input =
13 <input
14 id
15 type_
16 name
17 ?placeholder
18 ?autoComplete
19 required
20 disabled
21 ?value
22 ?defaultValue
23 ?onChange
24 className="block min-w-0 grow text-mist-100 placeholder:text-mist-80 \
25 placeholder:font-medium focus-visible:outline-none"
26 />
27 in
28 <div className="text-mist-100 focus-within:text-mana-100">
29 ( match label with
30 | Some label ->
31 <div
32 className=( "flex justify-between text-sm"
33 ^ if sr_only then " sr-only" else "" )>
34 <label htmlFor=id className="mb-1.5">
35 (string label)
36 ( if required && showIndicator then
37 <span className="text-phoenix-100">(string req_marker)</span>
38 else null )
39 </label>
40 ( if required || not showIndicator then null
41 else <span className="text-mist-80">(string "optional")</span> )
42 </div>
43 | None ->
44 null )
45 ( if type_ = "hidden" then input
46 else
47 <div
48 className=( "flex items-center rounded-lg py-1.5 px-3 outline-1 \
49 outline-mana-40/50 disabled:outline-mana-40/20 \
50 disabled:bg-mana-40/20 focus-within:outline-2 \
51 focus-within:outline-mana-100" ^ className )>
52 input
53 ( match trailing with
54 | Some trailing ->
55 <div className="shrink-0 text-mist-100 select-none">trailing</div>
56 | None ->
57 null )
58 </div> )
59 </div>