git.iko.soy/rowtype-yoga/psfp
on 21e940e help sign in
rowtype-yoga/psfp/src/Container/Component.purs
83 lines 3.0 kB history raw
1module Container.Component where
3import Prelude
5import Container.Header (mkHeader)
6import Container.Sidebar (mkSidebar, mkSidebarLink)
7import Effect (Effect)
8import React.Basic (JSX)
9import React.Basic.DOM (css)
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 sidebar <- mkSidebar
34 header <- mkHeader
35 useStyles <-
36 makeStyles \(theme ∷ CSSTheme)->
37 { container:
38 css
39 { backgroundColor: theme.backgroundColour
40 , fontFamily: theme.textFontFamily
41 , color: theme.textColour
42 , display: "grid"
43 , transition: "0.2s ease-in-out"
44 , gridTemplateAreas:
45 "'landing landing landing'"
46 <> "'header header header' "
47 <> "'nav content content'"
48 -- , "footer footer footer"
49 -- , gridTemplateColumns: "max-content auto"
50 , minWidth: "100%"
51 , minHeight: "100%"
52 , height: "5000px"
53 }
54 , landing: css { width: "100vw", height: "100vh", gridArea: "landing" }
55 , content: css { gridArea: "content" }
56 , icon: css { fill: "theme.textColour" }
57 }
58 sidebarLink <- mkSidebarLink
59 component "ContainerContent" \{ children } -> React.do
60 classes <- useStyles
61 collapsed /\ modifyCollapsed <- useState true
62 pure
63 $ R.div
64 { className: classes.container
65 , children:
66 [ R.img
67 { src: "https://images.unsplash.com/photo-1537498425277-c283d32ef9db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9"
68 , className: classes.landing
69 }
70 , element sidebar
71 { collapsed
72 , modifyCollapsed
73 , children:
74 [ element sidebarLink { name: "Learn", icon: element appendIcon {}, collapsed }
75 , element sidebarLink { name: "Try", icon: element bindIcon {}, collapsed }
76 , element sidebarLink { name: "Share", icon: element applyflippedIcon {}, collapsed }
77 , element sidebarLink { name: "Jobs", icon: element mapIcon {}, collapsed }
78 ]
79 }
80 , element header {}
81 , R.div { className: classes.content, children }
82 ]
83 }