git.iko.soy/rowtype-yoga/psfp
on 3e952f7 help sign in
rowtype-yoga/psfp/client/src/Container/Component.purs
98 lines 3.3 kB history raw
1module Container.Component where
3import Prelude
4import Container.Header (mkHeader)
5import Container.Landing (mkLandingPage)
6import Container.Sidebar (mkSidebar, mkSidebarLink)
7import Data.Nullable as Nullable
8import Effect (Effect)
9import JSS (jss, jssClasses)
10import Milkis.Impl.Window (windowFetch)
11import React.Basic (JSX)
12import React.Basic.DOM as R
13import React.Basic.Hooks (ReactComponent, component, element, useRef, useState, (/\))
14import React.Basic.Hooks as React
15import Yoga.CompileEditor.Component (mkCompileEditor)
16import Yoga.Compiler.Api (apiCompiler)
17import Yoga.Polyfill.SmoothScrolling (smoothScrollPolyfill)
18import Yoga.SVG.Icon (appendIcon, applyflippedIcon, bindIcon, mapIcon)
19import Yoga.Theme.Provider (mkThemeProvider)
20import Yoga.Theme.Styles (makeStylesJSS)
21import Yoga.Theme.Types (CSSTheme)
23mkContainer ∷ Effect (ReactComponent { theme ∷ CSSTheme, kids ∷ Array JSX })
24mkContainer = do
25 themeProvider <- mkThemeProvider
26 containerContent <- mkContainerContent
27 component "Container" \{ theme, kids } -> React.do
28 pure
29 $ element themeProvider
30 { theme
31 , children:
32 [ element containerContent { kids }
33 ]
34 }
36mkContainerContent ∷ Effect (ReactComponent { kids ∷ Array JSX })
37mkContainerContent = do
38 smoothScrollPolyfill
39 useStyles <-
40 makeStylesJSS
41 $ jssClasses \(theme ∷ CSSTheme) ->
42 { container:
43 jss
44 { color: theme.textColour
45 , display: "flex"
46 , flexDirection: "column"
47 , width: "100%"
48 , minHeight: "200%"
49 }
50 , content:
51 jss
52 { backgroundColor: theme.backgroundColour
53 , padding: "20px"
54 , minHeight: "calc(100vh - 40px)"
55 , paddingLeft: "100px"
56 , zIndex: 0
57 }
58 , icon: jss { fill: theme.textColour }
59 }
60 landingPage <- mkLandingPage
61 sidebar <- mkSidebar
62 header <- mkHeader
63 sidebarLink <- mkSidebarLink
64 editor <- mkCompileEditor (apiCompiler windowFetch)
65 component "ContainerContent" \{ kids } -> React.do
66 classes <- useStyles {}
67 collapsed /\ modifyCollapsed <- useState true
68 editorRef <- useRef Nullable.null
69 pure
70 $ R.div
71 { className: classes.container
72 , children:
73 [ element landingPage {}
74 , element sidebar
75 { collapsed
76 , modifyCollapsed
77 , kids:
78 [ element sidebarLink { name: "Learn", icon: element appendIcon {}, collapsed }
79 , element sidebarLink { name: "Try", icon: element bindIcon {}, collapsed }
80 , element sidebarLink { name: "Share", icon: element applyflippedIcon {}, collapsed }
81 , element sidebarLink { name: "Jobs", icon: element mapIcon {}, collapsed }
82 ]
83 }
84 , R.div
85 { className: classes.content
86 , children: [ element editor { initialCode, height: "50vh", language: "purescript" } ] <> kids
87 }
88 ]
89 }
91initialCode ∷ String
92initialCode =
93 """module Main where
95import Batteries
97main :: Effect Unit
98main = log "Let's do this!""""