git.iko.soy/rowtype-yoga/psfp
on 1b879c7 help sign in
rowtype-yoga/psfp/client/src/Card/Component.purs
131 lines 3.2 kB history raw
1module Card.Component where
3import Prelude
5import CSS.Safer (cssSafer)
6import Effect (Effect)
7import React.Basic (JSX)
8import React.Basic.DOM as R
9import React.Basic.Hooks (ReactComponent, component)
10import React.Basic.Hooks as React
11import Theme.Styles (classNames, makeStyles)
12import Theme.Types (CSSTheme)
14mkCard ∷
15 Effect
16 ( ReactComponent
17 { children ∷ Array JSX
18 }
19 )
20mkCard = do
21 useStyles <-
22 makeStyles \(theme ∷ CSSTheme) ->
23 { card:
24 cssSafer
25 { background: theme.backgroundColourLighter
26 , color: theme.textColour
27 , margin: "20px"
28 , boxShadow:
29 "1px 1px 20px rgba(0,0,0,0." <>
30 (if theme.isLight then "17" else "43") <> ")"
31 , borderRadius: "5px"
32 , padding: "36px 40px 32px 40px"
33 }
34 }
35 component "Card" \{ children } -> React.do
36 rawClasses <- useStyles
37 let
38 classes = flip classNames rawClasses
39 pure
40 $ R.div
41 { className: classes [ _.card ]
42 , children
43 }
45mkCardTitle ∷
46 Effect
47 ( ReactComponent
48 { children ∷ Array JSX
49 }
50 )
51mkCardTitle = do
52 useStyles <-
53 makeStyles \(theme ∷ CSSTheme) ->
54 { cardtitle:
55 cssSafer
56 { color: theme.textColourLightest
57 , fontSize: "1.2em"
58 , fontWeight: "400"
59 , fontFamily: theme.headingFontFamily
60 , padding: "4px 8px"
61 }
62 }
63 component "CardTitle" \{ children } -> React.do
64 rawClasses <- useStyles
65 let
66 classes = flip classNames rawClasses
67 pure
68 $ R.div
69 { className: classes [ _.cardtitle ]
70 , children
71 }
73mkCardSubtitle ∷
74 Effect
75 ( ReactComponent
76 { children ∷ Array JSX
77 }
78 )
79mkCardSubtitle = do
80 useStyles <-
81 makeStyles \(theme ∷ CSSTheme) ->
82 { cardtitle:
83 cssSafer
84 { color: theme.textColourDarker
85 , opacity: "0.8"
86 , fontSize: "1.0em"
87 , fontWeight: "500"
88 , fontFamily: theme.headingFontFamily
89 , padding: "4px 8px 22px 8px"
90 }
91 }
92 component "CardSubtitle" \{ children } -> React.do
93 rawClasses <- useStyles
94 let
95 classes = flip classNames rawClasses
96 pure
97 $ R.div
98 { className: classes [ _.cardtitle ]
99 , children
100 }
102mkCardContent ∷
103 Effect
104 ( ReactComponent
105 { children ∷ Array JSX
106 }
107 )
108mkCardContent = do
109 useStyles <-
110 makeStyles \(theme ∷ CSSTheme) ->
111 { cardContent:
112 cssSafer
113 { fontFamily: theme.textFontFamily
114 , color: theme.textColourDarker
115 , fontSize: "0.8em"
116 , fontWeight: "300"
117 , "WebkitFontSmoothing": "subpixel-antialiased"
118 , textAlign: "justify"
119 , hyphens: "auto"
120 , padding: "4px 8px 22px 8px"
121 }
122 }
123 component "CardContent" \{ children } -> React.do
124 rawClasses <- useStyles
125 let
126 classes = flip classNames rawClasses
127 pure
128 $ R.div
129 { className: classes [ _.cardContent ]
130 , children
131 }