git.iko.soy/rowtype-yoga/psfp
on 133b502 help sign in
rowtype-yoga/psfp/src/Container/Component.purs
84 lines 2.9 kB history raw
1module Container.Component where
3import Prelude
4import CSS.Safer (cssSafer)
5import Container.Header (mkHeader)
6import Container.Landing (mkLandingPage)
7import Container.Sidebar (mkSidebar, mkSidebarLink)
8import Effect (Effect)
9import React.Basic (JSX)
10import React.Basic.DOM as R
11import React.Basic.Hooks ((/\), ReactComponent, component, element, useState)
12import React.Basic.Hooks as React
13import SVG.Icon (appendIcon, applyflippedIcon, bindIcon, mapIcon)
14import Theme.Provider (mkThemeProvider)
15import Theme.Styles (makeStyles)
16import Theme.Types (CSSTheme)
18mkContainer ∷ Effect (ReactComponent { theme ∷ CSSTheme, children ∷ Array JSX })
19mkContainer = do
20 themeProvider <- mkThemeProvider
21 containerContent <- mkContainerContent
22 component "Container" \{ theme, children } -> React.do
23 pure
24 $ element themeProvider
25 { theme
26 , children:
27 [ element containerContent { children }
28 ]
29 }
31mkContainerContent ∷ Effect (ReactComponent { children ∷ Array JSX })
32mkContainerContent = do
33 landingPage <- mkLandingPage
34 sidebar <- mkSidebar
35 header <- mkHeader
36 useStyles <-
37 makeStyles \(theme ∷ CSSTheme) ->
38 -- { "@global": cssSafer { "*": { outline: "1px solid red" } }
39 { container:
40 cssSafer
41 { backgroundColor: theme.backgroundColour
42 , fontFamily: theme.textFontFamily
43 , color: theme.textColour
44 , display: "grid"
45 , transition: "0.2s ease-in-out"
46 , gridTemplateAreas:
47 "'landing landing landing'"
48 <> "'header header header' "
49 <> "'nav content content'"
50 -- , "footer footer footer"
51 -- , gridTemplateColumns: "max-content auto"
52 , minWidth: "100%"
53 , maxWidth: "100%"
54 }
55 , content:
56 cssSafer
57 { gridArea: "content"
58 , minHeight: "200vh"
59 }
60 , icon: cssSafer { fill: "theme.textColour" }
61 }
62 sidebarLink <- mkSidebarLink
63 component "ContainerContent" \{ children } -> React.do
64 classes <- useStyles
65 collapsed /\ modifyCollapsed <- useState true
66 pure
67 $ R.div
68 { className: classes.container
69 , children:
70 [ element landingPage {}
71 , element sidebar
72 { collapsed
73 , modifyCollapsed
74 , children:
75 [ element sidebarLink { name: "Learn", icon: element appendIcon {}, collapsed }
76 , element sidebarLink { name: "Try", icon: element bindIcon {}, collapsed }
77 , element sidebarLink { name: "Share", icon: element applyflippedIcon {}, collapsed }
78 , element sidebarLink { name: "Jobs", icon: element mapIcon {}, collapsed }
79 ]
80 }
81 , element header {}
82 , R.div { className: classes.content, children }
83 ]
84 }