#21 placeholder elements added for each page

packages/gui/src/components/NavBar/NavBar.svelte

@@ -35,5 +35,6 @@
 <style>
     #NavBar {
         height: 100vh;
+        width: 100%;
     }
 </style>

packages/gui/src/components/Placeholder/Placeholder.svelte

@@ -4,6 +4,7 @@
 
 <section>
     <header>{label}</header>
+    <slot></slot>
 </section>
 
 <style>

packages/gui/src/libs/stores.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const backLink = writable<string>('/');

packages/gui/src/routes/+layout.svelte

@@ -2,21 +2,45 @@
 <script lang="ts">
     import "$appcss";
     import NavBar from '$components/NavBar/NavBar.svelte';
+
+    import { backLink as backLinkStore } from '$libs/stores';
+
+    let backLink: string = '';
+    backLinkStore.subscribe((v) => {
+        backLink = v;
+    });
 </script>
 
-<div class="flex">
+<div>
-    <nav>
+    <nav class="">
         <NavBar/>
     </nav>
-    <section class="grow p-16">
+    <section class="px-16 pt-24">
+        {#if backLink}
+            <header>
+                <a href={backLink}>back</a>
+            </header>
+        {/if}
         <figure></figure>
         <slot></slot>
     </section>
 </div>
 
 <style>
+    div {
+        width: 100vh;
+        height: 100vh;
+    }
+    nav {
+        position: fixed;
+        width: 240px;
+    }
     section {
-        position: relative;
+        position: fixed;
+        left: 240px;
+        right: 0px;
+        height: 100vh;
+        overflow-y: scroll;
     }
     figure {
         position: absolute;
@@ -26,4 +50,12 @@
         bottom: 0px;
         background-image: url('/images/footer-grid-element.svg');
     }
+    header {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 50px;
+        border-bottom: #CCC 1px solid;
+    }
 </style>

packages/gui/src/routes/+page.svelte

@@ -1,8 +1,11 @@
 <!-- home / discover / welcome page -->
 <script lang="ts">
     import "$appcss";
+    import { backLink } from '$libs/stores';
     import Placeholder from "$components/Placeholder/Placeholder.svelte";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
+
+    backLink.set('');
 </script>
 
 

packages/gui/src/routes/cli/+page.svelte

@@ -1,7 +1,20 @@
 <script>
     import "$appcss";
+    import PageHeader from "$components/PageHeader/PageHeader.svelte";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+    import { backLink } from '$libs/stores';
+    backLink.set('/');
 </script>
 
+
 <div>
-    <h1>How to install cli</h1>
+    <PageHeader>INSTALL TEA</PageHeader>
+
+    <header>
+        <Placeholder label="big tea icon version with copy curl"/>
+    </header>
+
+    <section class="mt-8">
+        <Placeholder label="big black blank space"/>
+    </section>
 </div>

packages/gui/src/routes/documentation/+page.svelte

@@ -1,8 +1,20 @@
 <script>
     import "$appcss";
+    import PageHeader from "$components/PageHeader/PageHeader.svelte";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+    import { backLink } from '$libs/stores';
+    backLink.set('/');
 </script>
 
 
 <div>
-    <h1>Documentation</h1>
+    <PageHeader>Documentation</PageHeader>
+
+    <header>
+        <Placeholder label="featured courses"/>
+    </header>
+
+    <section class="mt-8">
+        <Placeholder label="Essential workshops"/>
+    </section>
 </div>

packages/gui/src/routes/packages/+page.svelte

@@ -1,16 +1,35 @@
-<!-- package list -->
+<script>
-<script lang="ts">
     import "$appcss";
+    import PageHeader from "$components/PageHeader/PageHeader.svelte";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+    import { backLink } from '$libs/stores';
+    backLink.set('/');
 </script>
 
+
 <div>
-    <h1>Packages Listing</h1>
+    <PageHeader>Packages</PageHeader>
-    <ul>
+    <section>
+        <Placeholder label="filter packages"/>
+    </section>
+    <ul class="grid grid-cols-3 gap-8 mt-8">
         <li>
-            <a href="/packages/pkg-a">Sample Pkg A</a>
+            <a href="/packages/pkg-a"><Placeholder label="Pkg A"></Placeholder></a>
         </li>
         <li>
-            <a href="/packages/pkg-b">Sample Pkg B</a>
+            <a href="/packages/pkg-b"><Placeholder label="Pkg B"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-c"><Placeholder label="Pkg C"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-a"><Placeholder label="Pkg D"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-b"><Placeholder label="Pkg E"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-c"><Placeholder label="Pkg F"></Placeholder></a>
         </li>
     </ul>
 </div>

packages/gui/src/routes/packages/[slug]/+page.svelte

@@ -1,17 +1,21 @@
 <script>
     import "$appcss";
-
+    import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import NavBar from '$components/NavBar/NavBar.svelte';
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
     import { page } from '$app/stores';
+    import { backLink } from '$libs/stores';
+    backLink.set('/packages');
+
     /** @type {import('./$types').PageData} */
     export let data;
 </script>
 
-<section class="flex">
+<div>
-    <nav>
+    <PageHeader>{data.title}</PageHeader>
-        <NavBar/>
+    <section>
-    </nav>
+        <Placeholder label="package cover w/ copy link" />
-    <div>
+    </section>
-        <h1>{data.title}: {$page.params.slug}</h1>
+    <section class="mt-8">
-    </div>
+        <Placeholder label="reviews" />
-</section>
+    </section>
+</div>

packages/gui/src/routes/packages/[slug]/+page.ts

@@ -4,7 +4,7 @@ import type { LoadEvent } from '@sveltejs/kit';
 export function load({ params }: LoadEvent) {
     // TODO: search package details here
     return {
-        title: `Hello Package: ${params.slug}!`,
+        title: `${params.slug}!`,
         content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
     };
 }

packages/gui/src/routes/profile/+page.svelte

@@ -1,8 +1,30 @@
-<!-- user profile page -->
+<script>
-<script lang="ts">
     import "$appcss";
+    import PageHeader from "$components/PageHeader/PageHeader.svelte";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+    import { backLink } from '$libs/stores';
+    backLink.set('/');
 </script>
 
+
 <div>
-    <h1>User Profile</h1>
+    <PageHeader>PROFILE</PageHeader>
+
+    <header>
+        <Placeholder label="github username and wallet address"/>
+    </header>
+
+    <section class="mt-8 grid grid-cols-2 gap-8">
+        <div>
+            <Placeholder label="pre-flight"/>
+        </div>
+        <div>
+            <Placeholder label="badges"/>
+        </div>
+    </section>
+
+    <section class="mt-8">
+        <Placeholder label="my installs"/>
+    </section>
+
 </div>

packages/gui/tsconfig.json

@@ -11,7 +11,7 @@
 		"strict": true,
 		"paths": {
 			"$appcss": ["src/app.css"],
-			"$libs/*": ["src/lib/*"],
+			"$libs/*": ["src/libs/*"],
 			"@api": ["src/lib/api.ts"],
 			"$components/*": ["src/components/*"],
 			"@tea/ui": ["../ui/src/*"],