git.iko.soy/rowtype-yoga/psfp
on 21162af help sign in
rowtype-yoga/psfp/client/dce-output/Container.Landing/index.js
230 lines 14 kB history raw
1// Generated by purs version 0.13.6
2"use strict";
3var Control_Applicative = require("../Control.Applicative/index.js");
4var Control_Bind = require("../Control.Bind/index.js");
5var Data_Foldable = require("../Data.Foldable/index.js");
6var Data_Functor = require("../Data.Functor/index.js");
7var Data_Maybe = require("../Data.Maybe/index.js");
8var Data_Nullable = require("../Data.Nullable/index.js");
9var Data_Symbol = require("../Data.Symbol/index.js");
10var Effect = require("../Effect/index.js");
11var JSS = require("../JSS/index.js");
12var React_Basic = require("../React.Basic/index.js");
13var React_Basic_DOM = require("../React.Basic.DOM/index.js");
14var React_Basic_DOM_Generated = require("../React.Basic.DOM.Generated/index.js");
15var React_Basic_Events = require("../React.Basic.Events/index.js");
16var React_Basic_Hooks = require("../React.Basic.Hooks/index.js");
17var React_Basic_Hooks_Internal = require("../React.Basic.Hooks.Internal/index.js");
18var Record_Extra = require("../Record.Extra/index.js");
19var Type_Equality = require("../Type.Equality/index.js");
20var Web_HTML = require("../Web.HTML/index.js");
21var Web_HTML_HTMLElement = require("../Web.HTML.HTMLElement/index.js");
22var Yoga_Button_Component = require("../Yoga.Button.Component/index.js");
23var Yoga_SVG_Icon = require("../Yoga.SVG.Icon/index.js");
24var Yoga_SVG_Image = require("../Yoga.SVG.Image/index.js");
25var Yoga_Scroll_Hook = require("../Yoga.Scroll.Hook/index.js");
26var Yoga_Theme_Styles = require("../Yoga.Theme.Styles/index.js");
27var Yoga_Typography_Header = require("../Yoga.Typography.Header/index.js");
28var welcomeText = "Enter the college of Kleisli";
29var copyText = "Learn how to tame and harness the compiler, whether you're a \u03bb or a \u039b";
30var buttonText = "I can't wait, let's go!";
31var mkLandingPage = function __do() {
32 var useStyles = Yoga_Theme_Styles.makeStylesJSS()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
33 return "actionButton";
34 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
35 return "actualActionButton";
36 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
37 return "landing";
38 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
39 return "landingImage";
40 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
41 return "logo";
42 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
43 return "textLayer";
44 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
45 return "topBar";
46 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
47 return "welcomeCopy";
48 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
49 return "welcomeText";
50 }))()(Record_Extra.mapRecordNil)()())()())()())()())()())()())()())()())()())(JSS.jssClasses()(function (v) {
51 return {
52 landing: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
53 return "gridArea";
54 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
55 return "height";
56 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
57 return "width";
58 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))()())({
59 width: "100vw",
60 height: "100vh",
61 gridArea: "landing"
62 }),
63 textLayer: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
64 return "height";
65 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
66 return "position";
67 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
68 return "width";
69 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
70 return "zIndex";
71 }))(JSS.jssAbleInt)()()()(JSS.jssAbleFieldsNil)))))()())({
72 position: "absolute",
73 width: "100%",
74 height: "100%",
75 zIndex: 2
76 }),
77 topBar: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
78 return "alignItems";
79 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
80 return "display";
81 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
82 return "flexDirection";
83 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
84 return "height";
85 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
86 return "justifyContent";
87 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
88 return "width";
89 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))))()())({
90 width: "100%",
91 display: "flex",
92 flexDirection: "row",
93 height: "90px",
94 justifyContent: "center",
95 alignItems: "space-around"
96 }),
97 logo: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
98 return "fill";
99 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
100 return "height";
101 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
102 return "marginTop";
103 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
104 return "width";
105 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))()())({
106 fill: v.textColour,
107 width: "50px",
108 height: "50px",
109 marginTop: "33px"
110 }),
111 welcomeText: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
112 return "fontSize";
113 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
114 return "marginLeft";
115 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
116 return "marginTop";
117 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))()())({
118 fontSize: "36pt",
119 marginTop: "33px",
120 marginLeft: "5vw"
121 }),
122 welcomeCopy: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
123 return "fontSize";
124 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
125 return "marginLeft";
126 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
127 return "marginTop";
128 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
129 return "maxWidth";
130 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))()())({
131 fontSize: "22pt",
132 marginTop: "20px",
133 marginLeft: "5vw",
134 maxWidth: "400px"
135 }),
136 actionButton: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
137 return "display";
138 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
139 return "marginLeft";
140 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))()())({
141 marginLeft: "5vw",
142 display: "flex"
143 }),
144 actualActionButton: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
145 return "paddingLeft";
146 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
147 return "paddingRight";
148 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))()())({
149 paddingLeft: "10px",
150 paddingRight: "10px"
151 }),
152 landingImage: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
153 return "height";
154 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
155 return "position";
156 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
157 return "width";
158 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))()())({
159 position: "absolute",
160 width: "100%",
161 height: "100%"
162 })
163 };
164 }))();
165 var h = Yoga_Typography_Header.mkH();
166 var button = Yoga_Button_Component.mkButton()()()()();
167 var backgroundImage = Yoga_SVG_Image.mkLandingPageBackground();
168 return React_Basic_Hooks.component()()()("LandingPage")(function (v) {
169 return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(useStyles({}))(function (classes) {
170 return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(Yoga_Theme_Styles.useTheme)(function (theme) {
171 return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(React_Basic_Hooks.useRef(Data_Nullable["null"]))(function (ref) {
172 return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(Yoga_Scroll_Hook.useScrollYPosition)(function (scrollY) {
173 return Control_Applicative.pure(React_Basic_Hooks_Internal.applicativeRender(Type_Equality.refl))(React_Basic_DOM_Generated.div()({
174 ref: ref,
175 className: classes.landing,
176 children: [ React_Basic.element(backgroundImage)({
177 className: classes.landingImage
178 }), React_Basic_DOM_Generated.div()({
179 className: classes.textLayer,
180 children: [ React_Basic_DOM_Generated.div()({
181 className: classes.topBar,
182 children: [ React_Basic.element(Yoga_SVG_Icon.trianglelogoIcon())({
183 className: classes.logo
184 }) ]
185 }), React_Basic_DOM_Generated.div()({
186 className: classes.welcomeText,
187 children: [ React_Basic_DOM.text(welcomeText) ]
188 }), React_Basic_DOM_Generated.div()({
189 className: classes.welcomeCopy,
190 children: [ React_Basic_DOM.text(copyText) ]
191 }), React_Basic_DOM_Generated.div()({
192 className: classes.actionButton,
193 children: [ React_Basic.element(button)({
194 buttonProps: {
195 onClick: React_Basic_Events.handler_(function __do() {
196 var maybeNode = React_Basic_Hooks.readRefMaybe(ref)();
197 return Data_Foldable.for_(Effect.applicativeEffect)(Data_Foldable.foldableMaybe)(Control_Bind.bind(Data_Maybe.bindMaybe)(maybeNode)(Web_HTML_HTMLElement.fromNode))(function (n) {
198 return function __do() {
199 var height = Data_Functor.mapFlipped(Effect.functorEffect)(Web_HTML_HTMLElement.getBoundingClientRect(n))(function (v1) {
200 return v1.height;
201 })();
202 var win = Web_HTML.window();
203 return win.scrollTo({
204 top: height,
205 left: 0,
206 behavior: "smooth"
207 });
208 };
209 })();
210 })
211 },
212 buttonType: Yoga_Button_Component.HighlightedButton.value,
213 kids: [ React_Basic_DOM.text(buttonText) ],
214 className: classes.actualActionButton
215 }) ]
216 }) ]
217 }) ]
218 }));
219 });
220 });
221 });
222 });
223 })();
224};
225module.exports = {
226 mkLandingPage: mkLandingPage,
227 welcomeText: welcomeText,
228 copyText: copyText,
229 buttonText: buttonText
230};