blob: fd8f1c5ca865b644c296ed8e8b8ff9d34badbccd (
plain)
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
|
type size =
| XSmall
| Small
| Medium
| Large
| XLarge
| XXLarge
| XXXLarge;
let size_to_string = size =>
switch (size) {
| XSmall => "text-xs"
| Small => "text-sm"
| Medium => "text-base"
| Large => "text-lg"
| XLarge => "text-xl"
| XXLarge => "text-2xl"
| XXXLarge => "text-3xl"
};
type weight =
| Thin
| Light
| Regular
| Semibold
| Bold
| Extrabold
| Black;
type align =
| Left
| Center
| Right
| Justify;
[@react.component]
let make =
(
~color=Theme.Color.Gray12,
~size: size=Small,
~weight: weight=Regular,
~align=Left,
~children,
~role=?,
) => {
let className =
Cx.make([
Theme.text(color),
size_to_string(size),
switch (weight) {
| Thin => "font-thin"
| Light => "font-light"
| Regular => "font-normal"
| Semibold => "font-semibold"
| Bold => "font-bold"
| Extrabold => "font-extrabold"
| Black => "font-black"
},
switch (align) {
| Left => "text-left"
| Right => "text-right"
| Justify => "text-justify"
| Center => "text-center"
},
]);
<span className ?role> {React.string(children)} </span>;
};
|
