/
Row.purs
50 lines (40 loc) · 1.23 KB
/
Row.purs
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
module Lumi.Components.Row where
import JSS (JSS, jss)
import React.Basic (Component, JSX, createComponent, element, makeStateless)
import React.Basic.DOM (CSS, css, unsafeCreateDOMComponent)
component :: Component RowProps
component = createComponent "Row"
type RowProps =
{ children :: Array JSX
, style :: CSS
}
row :: RowProps -> JSX
row = makeStateless component lumiRowElement
where
lumiRowElement = element (unsafeCreateDOMComponent "lumi-row")
row_ :: Array JSX -> JSX
row_ children = row { children, style: css {} }
responsiveRow :: RowProps -> JSX
responsiveRow = makeStateless component lumiResponsiveRowElement
where
lumiResponsiveRowElement = element (unsafeCreateDOMComponent "lumi-responsive-row")
responsiveRow_ :: Array JSX -> JSX
responsiveRow_ children = responsiveRow { children, style: css {} }
styles :: JSS
styles = jss
{ "@global":
{ "lumi-row":
{ boxSizing: "border-box"
, display: "flex"
, flexDirection: "row"
}
, "lumi-responsive-row":
{ boxSizing: "border-box"
, display: "flex"
, flexDirection: "row"
, "@media (max-width: 860px)":
{ flexDirection: "column"
}
}
}
}