git.iko.soy/rowtype-yoga/psfp
on 21e940e help sign in
rowtype-yoga/psfp/src/Element.purs
60 lines 1.7 kB history raw
1module Element where
3import Prelude
4import Effect (Effect)
5import Effect.Console (log)
6import React.Basic.DOM (css)
7import React.Basic.DOM as R
8import React.Basic.Events (handler_)
9import React.Basic.Hooks (ReactComponent, component, element, useEffect, useState, (/\))
10import React.Basic.Hooks as React
11import Theme.Provider (mkThemeProvider)
12import Theme.Styles (makeStyles)
13import Theme.Types (Theme)
15mkToggleButton ∷ Effect (ReactComponent { label ∷ String })
16mkToggleButton = do
17 useStyles <-
18 makeStyles \(theme ∷ Theme) -> -- do
19 { button:
20 css
21 { backgroundColor: theme.highlightColour
22 , color: theme.textColour
23 , fontFamily: theme.textFontFamily
24 , fontSize: "1em"
25 , paddingTop: "10px"
26 , paddingBottom: "10px"
27 , paddingRight: "20px"
28 , paddingLeft: "20px"
29 , border: "solid 0px black"
30 , borderRadius: "5px"
31 }
32 }
33 component "ToggleButton" \{ label } -> React.do
34 classes <- useStyles
35 on /\ setOn <- useState false
36 useEffect on do
37 log $ "State: " <> if on then "On" else "Off"
38 pure (pure unit)
39 pure
40 $ R.button
41 { onClick: handler_ $ setOn not
42 , className: classes.button
43 , children:
44 [ R.text label
45 , R.text if on then " On" else " Off"
46 ]
47 }
49mkToggleButtonContainer ∷ Effect (ReactComponent {})
50mkToggleButtonContainer = do
51 themeProvider <- mkThemeProvider
52 toggleButton <- mkToggleButton
53 component "Container" \_ ->
54 pure
55 $ R.div
56 { children:
57 [ element toggleButton { label: "A" }
58 , element toggleButton { label: "B" }
59 ]
60 }