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