git.iko.soy/rowtype-yoga/psfp
on 21e940e help sign in
rowtype-yoga/psfp/src/Typography/Header.purs
93 lines 2.1 kB history raw
1module Typography.Header where
3import Prelude
5import Data.Array as Array
6import Data.Foldable (intercalate)
7import Data.Maybe (Maybe)
8import Effect (Effect)
9import React.Basic.DOM (css)
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 css
30 { color: theme.textColour
31 , fontFamily: theme.headingFontFamily
32 }
33 , h1:
34 css
35 { textTransform: "uppercase"
36 , fontSize: "3.6em"
37 , letterSpacing: "0.07em"
38 , margin: 0
39 , padding: 0
40 }
41 , h2:
42 css
43 { textTransform: "uppercase"
44 , fontSize: "3em"
45 , letterSpacing: "0.05em"
46 , margin: 0
47 , padding: 0
48 }
49 , h3:
50 css
51 { fontSize: "2.2em"
52 , margin: 0
53 , padding: 0
54 }
55 , h4:
56 css
57 { fontSize: "1.5em"
58 , margin: 0
59 , padding: 0
60 }
61 , h5:
62 css
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 )