git.iko.soy/rowtype-yoga/psfp
on 34d0921 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 Yoga.CSS.Safer (cssSafer)
5import Yoga.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 Milkis.Impl.Window (windowFetch)
12import Yoga.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 Yoga.SVG.Icon (appendIcon, applyflippedIcon, bindIcon, mapIcon)
18import Yoga.Theme.Provider (mkThemeProvider)
19import Yoga.Theme.Styles (makeStyles)
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 makeStyles \(theme ∷ CSSTheme) ->
40 -- { "@global": cssSafer { "*": { outline: "1px solid red" } }
41 { container:
42 --"@global": -- { "*": { outline: "1px solid red" } }
43 cssSafer
44 { fontFamily: theme.textFontFamily
45 , color: theme.textColour
46 , display: "flex"
47 , flexDirection: "column"
48 , width: "100%"
49 , minHeight: "200%"
50 }
51 , content:
52 cssSafer
53 { backgroundColor: theme.backgroundColour
54 , padding: "20px"
55 , minHeight: "calc(100vh - 40px)"
56 , paddingLeft: "100px"
57 , zIndex: 0
58 }
59 , icon: cssSafer { fill: "theme.textColour" }
60 }
61 landingPage <- mkLandingPage
62 sidebar <- mkSidebar
63 header <- mkHeader
64 sidebarLink <- mkSidebarLink
65 editor <- mkCompileEditor windowFetch
66 component "ContainerContent" \{ kids } -> React.do
67 classes <- useStyles
68 collapsed /\ modifyCollapsed <- useState true
69 editorRef <- useRef Nullable.null
70 pure
71 $ R.div
72 { className: classes.container
73 , children:
74 [ element landingPage {}
75 , element sidebar
76 { collapsed
77 , modifyCollapsed
78 , kids:
79 [ element sidebarLink { name: "Learn", icon: element appendIcon {}, collapsed }
80 , element sidebarLink { name: "Try", icon: element bindIcon {}, collapsed }
81 , element sidebarLink { name: "Share", icon: element applyflippedIcon {}, collapsed }
82 , element sidebarLink { name: "Jobs", icon: element mapIcon {}, collapsed }
83 ]
84 }
85 , R.div
86 { className: classes.content
87 , children: [ element editor { initialCode, height: "50vh", language: "purescript" } ] <> kids
88 }
89 ]
90 }
92initialCode :: String
93initialCode =
94 """module Main where
96import Batteries
98main :: Effect Unit
99main = log "Let's do this!""""