ybbond-reason

commit 1f4ac34bbc9448e95303ecc3ee87af57f734e3b7
parent 0449d891f85846418a43e09dfe6a8cafb019e5ed
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Mon, 19 Aug 2019 20:13:14 +0700

feature(Header) => added header navigator

Diffstat:
M
src/App.re
 | 
14
+++++++++++---
M
src/CurViScene.re
 | 
18
+++++++++++++-----
A
src/PoemsScene.re
 | 
4
++++
M
src/UsesScene.re
 | 
6
++----
A
src/components/Header.re
 | 
50
++++++++++++++++++++++++++++++++++++++++++++++++++

diff --git a/src/App.re b/src/App.re
@@ -34,14 +34,22 @@ let make = () => {
 
   let content = () =>
     switch (url.path) {
+    | [] => <CurViScene />
     | ["uses"] => <UsesScene />
-    | [""] => <CurViScene />
+    | ["poem"] =>
+      ReasonReact.Router.replace("poems");
+      <PoemsScene />;
+    | ["poems"] => <PoemsScene />
     | _ =>
-      ReasonReact.Router.push("");
+      ReasonReact.Router.replace("/");
       <CurViScene />;
     };
 
   <div className=Styles.container>
-    <div className=Styles.main> <Styled /> {content()} </div>
+    <div className=Styles.main>
+      <Styled />
+      <Header current={url.path !== [] ? List.hd(url.path) : "/"} />
+      {content()}
+    </div>
   </div>;
 };
diff --git a/src/CurViScene.re b/src/CurViScene.re
@@ -37,28 +37,36 @@ let make = () => {
           variant: Done,
           text:
             <span>
-              {ReasonReact.string("Design apprentice at X-Graphic.")}
+              {ReasonReact.string("Design apprentice at ")}
+              <Link href="https://www.xg.co.id" text="X-Graphic" />
+              {ReasonReact.string(".")}
             </span>,
         },
         {
           variant: Done,
           text:
             <span>
-              {ReasonReact.string("Field inspector at Touchten Games.")}
+              {ReasonReact.string("Quality Assurance at ")}
+              <Link href="https://www.touchten.com" text="Touchten Games" />
+              {ReasonReact.string(".")}
             </span>,
         },
         {
           variant: Done,
           text:
             <span>
-              {ReasonReact.string("Reactive engineer at Vospay.")}
+              {ReasonReact.string("Reactive Engineer at ")}
+              <Link href="https://vospay.id" text="Vospay" />
+              {ReasonReact.string(".")}
             </span>,
         },
         {
           variant: Progress,
           text:
             <span>
-              {ReasonReact.string("Frontend Engineer at Kumparan.")}
+              {ReasonReact.string("Frontend Engineer at ")}
+              <Link href="https://kumparan.com" text="kumparan" />
+              {ReasonReact.string(".")}
             </span>,
         },
       |]
@@ -118,7 +126,7 @@ let make = () => {
           text:
             <span>
               <Link
-                href="mailto:bandungpenting@gmail.com"
+                href="mailto:bandungpenting@gmail.com?subject=From%20ybbond.dev"
                 text="bandungpenting@gmail.com"
               />
             </span>,
diff --git a/src/PoemsScene.re b/src/PoemsScene.re
@@ -0,0 +1,4 @@
+[@react.component]
+let make = () => {
+  <React.Fragment> <p> {ReasonReact.string("Poems")} </p> </React.Fragment>;
+};
diff --git a/src/UsesScene.re b/src/UsesScene.re
@@ -1,6 +1,4 @@
 [@react.component]
 let make = () => {
-  <React.Fragment>
-    <span>{ReasonReact.string("Hi")}</span>
-  </React.Fragment>
-}
+  <React.Fragment> <p> {ReasonReact.string("Uses")} </p> </React.Fragment>;
+};
diff --git a/src/components/Header.re b/src/components/Header.re
@@ -0,0 +1,50 @@
+module Styles = {
+  open Css;
+
+  let strikethrough = style([textDecoration(`lineThrough)]);
+  let underline = style([textDecoration(`underline)]);
+  let h1 = style([fontWeight(`num(400)), fontSize(`em(1.4))]);
+};
+
+type contentType = {
+  title: string,
+  path: string,
+};
+
+let content: array(contentType) = [|
+  {title: "CV", path: "/"},
+  {title: "Poems-Verses", path: "poems"},
+  {title: "Uses", path: "uses"},
+|];
+
+[@react.component]
+let make = (~current: string) => {
+  let contentElements =
+    Array.mapi(
+      (index, item) => {
+        let separator = index !== Array.length(content) - 1 ? " / " : "";
+        let res =
+          item.path === current
+            ? <React.Fragment key=index>
+                <span className=Styles.strikethrough>
+                  {ReasonReact.string(item.title)}
+                </span>
+                <span> {ReasonReact.string(separator)} </span>
+              </React.Fragment>
+            : <React.Fragment key=index>
+                <Link internal={item.path} text={item.title} />
+                <span> {ReasonReact.string(separator)} </span>
+              </React.Fragment>;
+
+        res;
+      },
+      content,
+    );
+
+  <React.Fragment>
+    <h1 className=Styles.h1>
+      {ReasonReact.string("Yohanes Bandung Bondowoso")}
+    </h1>
+    {React.array(contentElements)}
+  </React.Fragment>;
+};