88 lines
1.8 KiB
ReasonML
88 lines
1.8 KiB
ReasonML
type route =
|
|
| DistBuilder
|
|
| Home
|
|
| NotFound;
|
|
|
|
let routeToPath = route =>
|
|
switch (route) {
|
|
| DistBuilder => "/dist-builder"
|
|
| Home => "/"
|
|
| _ => "/"
|
|
};
|
|
|
|
module Menu = {
|
|
module Styles = {
|
|
open Css;
|
|
let menu =
|
|
style([
|
|
position(`relative),
|
|
marginTop(em(0.25)),
|
|
marginBottom(em(0.25)),
|
|
selector(
|
|
"a",
|
|
[
|
|
borderRadius(em(0.25)),
|
|
display(`inlineBlock),
|
|
backgroundColor(`hex("eee")),
|
|
padding(em(1.)),
|
|
cursor(`pointer),
|
|
],
|
|
),
|
|
selector("a:hover", [backgroundColor(`hex("bfcad4"))]),
|
|
selector("a:hover", [backgroundColor(`hex("bfcad4"))]),
|
|
selector(
|
|
"a:not(:first-child):not(:last-child)",
|
|
[marginRight(em(0.25)), marginLeft(em(0.25))],
|
|
),
|
|
]);
|
|
};
|
|
|
|
module Item = {
|
|
[@react.component]
|
|
let make = (~href, ~children) => {
|
|
<a
|
|
href
|
|
onClick={e => {
|
|
e->ReactEvent.Synthetic.preventDefault;
|
|
ReasonReactRouter.push(href);
|
|
}}>
|
|
children
|
|
</a>;
|
|
};
|
|
};
|
|
|
|
[@react.component]
|
|
let make = () => {
|
|
<div className=Styles.menu>
|
|
<Item href={routeToPath(Home)} key="home"> {"Home" |> R.ste} </Item>
|
|
<Item href={routeToPath(DistBuilder)} key="dist-builder">
|
|
{"Dist Builder" |> R.ste}
|
|
</Item>
|
|
</div>;
|
|
};
|
|
};
|
|
|
|
let fixedLength = r =>
|
|
<div className="w-full max-w-screen-xl mx-auto px-6"> r </div>;
|
|
|
|
[@react.component]
|
|
let make = () => {
|
|
let url = ReasonReactRouter.useUrl();
|
|
|
|
let routing =
|
|
switch (url.path) {
|
|
| ["dist-builder"] => DistBuilder
|
|
| [] => Home
|
|
| _ => NotFound
|
|
};
|
|
|
|
<>
|
|
<Menu />
|
|
{switch (routing) {
|
|
| DistBuilder => <DistBuilder />
|
|
| Home => <Home />
|
|
| _ => fixedLength({"Page is not found" |> R.ste})
|
|
}}
|
|
</>;
|
|
};
|