Add Header

package.json

@@ -14,6 +14,7 @@
     },
     "dependencies": {
         "@hashgraph/sdk": "^1.1.8",
+        "@mdi/js": "^4.9.95",
         "vue": "^3.0.0-alpha.8",
         "vue-router": "^4.0.0-alpha.1"
     },

patches/@babel+helper-builder-react-jsx+7.8.3.patch

@@ -0,0 +1,14 @@
+diff --git a/node_modules/@babel/helper-builder-react-jsx/lib/index.js b/node_modules/@babel/helper-builder-react-jsx/lib/index.js
+index 6d3e073..3740f28 100644
+--- a/node_modules/@babel/helper-builder-react-jsx/lib/index.js
++++ b/node_modules/@babel/helper-builder-react-jsx/lib/index.js
+@@ -138,7 +138,8 @@ You can turn on the 'throwIfNamespace' flag to bypass this warning.`);
+       attribs = t.nullLiteral();
+     }
+
+-    args.push(attribs, ...path.node.children);
++    args.push(attribs);
++    args.push(t.arrayExpression(path.node.children));
+
+     if (opts.post) {
+       opts.post(state, file);

src/App.vue

@@ -1,18 +1,32 @@
 <script lang="tsx">
 import * as Vue from "vue";
+import { View } from "vue-router";
+import Header from "./components/Header.vue";
 
 export default Vue.defineComponent({
+    name: "App",
     render() {
         return (
-            <div class="App-main" onClick={() => {
-                console.log("click!")
-            }}/>
+            <>
+                <Header />
+                <div class="App-main">
+                    <View />
+                </div>
+            </>
         );
     }
 });
 </script>
 
-<style>
+<style lang="css">
+/* Found at body in src/index.html */
+#app {
+    display: flex;
+    min-height: inherit;
+    flex-direction: column;
+    background-color: var(--colorRiverStyx);
+}
+
 .App-main {
 }
 </style>

src/components/Header.vue

@@ -0,0 +1,113 @@
+<script lang="tsx">
+import * as Vue from "vue";
+import Icon from "./Icon.vue";
+import { mdiStoreOutline, mdiCoinOutline, mdiEmoticonOutline } from "@mdi/js";
+
+export default Vue.defineComponent({
+    render() {
+        return (
+            <header class="Header">
+                <Icon class="Header-logoIcon" d={ mdiStoreOutline } />
+                <span class="Header-logo">Trading Post</span>
+                <div class="Header-currentUser">
+                    <div class="Header-userName">George</div>
+                    <div class="Header-userBalance">
+                        <div class="Header-userBalanceRow">
+                            <span class="Header-userBalanceAmount">8</span>
+                            <Icon class="Header-currencyIcon" d={ mdiEmoticonOutline } />
+                        </div>
+                        <div class="Header-userBalanceRow">
+                            <span class="Header-userBalanceAmount">3,523,125.93214</span>
+                            <Icon class="Header-currencyIcon" d={ mdiCoinOutline } />
+                        </div>
+                    </div>
+                    <div class="Header-userAvatar"></div>
+                </div>
+                <div class="Header-newTrade">
+                    Trade
+                </div>
+            </header>
+        );
+    }
+});
+</script>
+
+<style>
+.Header {
+    display: flex;
+    background-color: var(--colorAbsenceOfLight);
+    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+    align-items: center;
+    padding: 16px;
+}
+
+.Header-logoIcon {
+    fill: var(--colorBeer);
+    width: 32px;
+}
+
+.Header-logo {
+    margin-inline-start: 16px;
+    color: var(--colorWhite);
+    flex-grow: 1;
+    font-size: 24px;
+}
+
+.Header-currentUser {
+    color: var(--colorWhite);
+    display: grid;
+    justify-items: end;
+    grid-template-areas: "userName userAvatar" "userBalance userAvatar";
+    grid-column-gap: 16px;
+    grid-row-gap: 8px;
+    align-items: center;
+    margin-inline: 24px;
+}
+
+.Header-userName {
+    grid-area: userName;
+}
+
+.Header-userBalance {
+    grid-area: userBalance;
+    display: grid;
+    grid-column-gap: 16px;
+    grid-auto-flow: column;
+    align-items: center;
+}
+
+.Header-userBalanceRow {
+    display: flex;
+    align-items: center;
+}
+
+.Header-currencyIcon {
+    fill: var(--colorBeer);
+    height: 24px;
+}
+
+.Header-userBalanceAmount {
+    margin-inline-end: 8px;
+}
+
+.Header-userAvatar {
+    width: 40px;
+    grid-area: userAvatar;
+    height: 40px;
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+}
+
+.Header-newTrade {
+    padding-block: 8px;
+    user-select: none;
+    cursor: pointer;
+    padding-inline: 14px;
+    margin-inline-end: 4px;
+    color: var(--colorWhite);
+    display: flex;
+    align-items: center;
+    background-color: var(--colorBeer);
+    border-radius: 4px;
+}
+</style>

src/components/Icon.vue

@@ -0,0 +1,15 @@
+<script lang="tsx">
+import * as Vue from "vue";
+
+interface Props {
+    d: string;
+}
+
+export default Vue.defineComponent({
+    setup(props: Props) {
+        return () => (
+            <svg viewBox="0 0 24 24"><path d={ props.d } /></svg>
+        );
+    }
+});
+</script>

src/index.css

@@ -0,0 +1,9 @@
+html {
+    min-height: 100vh;
+}
+
+body {
+    min-height: inherit;
+    margin: 0;
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+}

src/index.ts

@@ -1,7 +1,11 @@
 import "./theme.css";
-import { createApp, h } from "vue";
-import App from "./App.vue";
+import "./index.css";
+
+import { createApp } from "vue";
 
-const app = createApp(App);
+import App from "./App.vue";
+import router from "./router";
 
-app.mount("#app");
+createApp(App)
+    .use(router)
+    .mount("#app");

src/router.ts

@@ -0,0 +1,16 @@
+import { createRouter, createWebHistory } from "vue-router";
+
+import Home from "./views/Home.vue";
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: "/",
+            component: Home,
+            name: "Home"
+        }
+    ]
+})
+
+export default router;

src/theme.css

@@ -1,3 +1,7 @@
 :root {
     --colorWhite: white;
+    --colorRiverStyx: #161a20;
+    --colorAbsenceOfLight: #111419;
+    --colorBeer: #f6931d;
+    --colorSoftToneInk: #9c621d;
 }

src/views/Home.vue

@@ -0,0 +1,13 @@
+<script lang="tsx">
+import * as Vue from "vue";
+
+export default Vue.defineComponent({
+    render() {
+        return (
+            <div class="home">
+
+            </div>
+        );
+    }
+});
+</script>

yarn.lock

@@ -827,6 +827,11 @@
   dependencies:
     browser-headers "^0.4.0"
 
+"@mdi/js@^4.9.95":
+  version "4.9.95"
+  resolved "https://registry.yarnpkg.com/@mdi/js/-/js-4.9.95.tgz#8984c2ac04c89913a3ff2bbe4d91f4ab51d8ef4f"
+  integrity sha512-6zKTCqZUCuDWJThdRcjdFTqp2BXfYwXI1UlYa68A1/kmCcy1ijpbpRbrJcUdZ+9WojencCh1DOGFqhj/x8I/eQ==
+
 "@types/anymatch@*":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"