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