initial commit

src/App.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import Greet from './lib/Greet.svelte'
+    import MetadataInput from './lib/MetadataInput.svelte';
+  import Sidebar from "./lib/Sidebar.svelte";
+
+  let selectedTab: string = "input";
+
+</script>
+
+<main class="window">
+  <Sidebar bind:selectedTab />
+
+  <div class="main">
+    {#if selectedTab == "input"}
+      <MetadataInput />
+    {:else if selectedTab == "generate"}
+      <p>
+        Generate Mask is Showing here
+      </p>
+    {:else if selectedTab == "settings"}
+      <p>
+        Settings go here
+      </p>
+    {/if}
+    <div class="row">
+      <Greet />
+    </div>
+  
+  </div>
+
+
+
+</main>
+
+<style>
+  .window {
+    display: grid;
+    grid-template-areas: "Nav Main";
+    grid-template-columns: 4rem calc(100% - 4rem);
+    box-sizing: border-box;
+    width: 100vw;
+    height: 100vh;
+
+    overflow: hidden;
+  }
+
+  .main {
+    grid-area: Main;
+    overflow: hidden;
+  }
+
+  .main p {
+    text-align: center;
+  }
+
+  .settings {
+
+  }
+</style>