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