git.iko.soy/rowtype-yoga/psfp
on dc3b89e 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.Polyfill.SmoothScrolling (smoothScrollPolyfill)
17import Yoga.SVG.Icon (appendIcon, applyflippedIcon, bindIcon, mapIcon)
18import Yoga.Theme.Provider (mkThemeProvider)
19import Yoga.Theme.Styles (makeStylesJSS)
20import Yoga.Theme.Types (CSSTheme)
22mkContainer ∷ Effect (ReactComponent { theme ∷ CSSTheme, kids ∷ Array JSX })
23mkContainer = do
24 themeProvider <- mkThemeProvider
25 containerContent <- mkContainerContent
26 component "Container" \{ theme, kids } -> React.do
27 pure
28 $ element themeProvider
29 { theme
30 , children:
31 [ element containerContent { kids }
32 ]
33 }
35mkContainerContent ∷ Effect (ReactComponent { kids ∷ Array JSX })
36mkContainerContent = do
37 smoothScrollPolyfill
38 useStyles <-
39 makeStylesJSS
40 $ jssClasses \(theme ∷ CSSTheme) ->
41 { container:
42 jss
43 { fontFamily: theme.textFontFamily
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 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!""""