git.iko.soy/rowtype-yoga/psfp
on d78b06e help sign in
rowtype-yoga/psfp/client/src/Typography/Header.purs
93 lines 2.2 kB history raw
1module Typography.Header where
3import Prelude
5import CSS.Safer (cssSafer)
6import Data.Array as Array
7import Data.Foldable (intercalate)
8import Data.Maybe (Maybe)
9import Effect (Effect)
10import React.Basic.DOM as R
11import React.Basic.Hooks (ReactComponent, component)
12import React.Basic.Hooks as React
13import Theme.Styles (makeStyles)
14import Theme.Types (CSSTheme)
16data HeadingLevel
17 = H1
18 | H2
19 | H3
20 | H4
21 | Subheading
23mkH ∷
24 Effect (ReactComponent { level ∷ HeadingLevel, text ∷ String, className ∷ Maybe String })
25mkH = do
26 useStyles <-
27 makeStyles \(theme ∷ CSSTheme) ->
28 { common:
29 cssSafer
30 { color: theme.textColour
31 , fontFamily: theme.headingFontFamily
32 }
33 , h1:
34 cssSafer
35 { textTransform: "uppercase"
36 , fontSize: "3.6em"
37 , letterSpacing: "0.07em"
38 , margin: 0
39 , padding: 0
40 }
41 , h2:
42 cssSafer
43 { textTransform: "uppercase"
44 , fontSize: "3em"
45 , letterSpacing: "0.05em"
46 , margin: 0
47 , padding: 0
48 }
49 , h3:
50 cssSafer
51 { fontSize: "2.2em"
52 , margin: 0
53 , padding: 0
54 }
55 , h4:
56 cssSafer
57 { fontSize: "1.5em"
58 , margin: 0
59 , padding: 0
60 }
61 , h5:
62 cssSafer
63 { fontSize: "1.0em"
64 , margin: 0
65 , padding: 0
66 , color: theme.textColourLighter
67 }
68 }
69 component "Heading" \{ level, text, className } -> React.do
70 classes <- useStyles
71 let
72 elem = case level of
73 H1 -> R.h1
74 H2 -> R.h2
75 H3 -> R.h3
76 H4 -> R.h4
77 Subheading -> R.h5
78 let
79 specificClassName = case level of
80 H1 -> classes.h1
81 H2 -> classes.h2
82 H3 -> classes.h3
83 H4 -> classes.h4
84 Subheading -> classes.h5
85 pure
86 $ elem
87 ( { className:
88 intercalate " "
89 $ [ classes.common, specificClassName ]
90 <> Array.fromFoldable className
91 , children: [ R.text text ]
92 }
93 )