feat: Initial UI design

src/ui/public/global.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+
 * {
   margin: 0;
   padding: 0;

src/ui/src/App.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import VisibilityProvider from './providers/VisibilityProvider.svelte';
-  import HelloWorld from './components/HelloWorld.svelte';
+  import Main from './components/Main.svelte';
   import { debugData } from './utils/debugData';
 
   debugData([
@@ -13,6 +13,6 @@
 
 <main>
   <VisibilityProvider>
-    <HelloWorld />
+    <Main />
   </VisibilityProvider>
 </main>

src/ui/src/components/Main.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import Resources from './resources/Resources.svelte';
+</script>
+
+<div class="container">
+  <Resources />
+  <div class="content-wrapper">
+    <div class="content-container">Some Data here</div>
+  </div>
+</div>
+
+<style>
+  .container {
+    width: 55%;
+    height: 65%;
+    background-color: rgb(44, 62, 80);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 0.25vh;
+  }
+
+  .content-wrapper {
+    margin-left: 18vh;
+    height: 100%;
+    display: grid;
+    place-items: center;
+  }
+
+  .content-container {
+    width: 80vh;
+    height: 55vh;
+    background-color: #34495e;
+    border-radius: 0.25vh;
+    color: white;
+    font-family: 'Inter', sans-serif;
+  }
+</style>

src/ui/src/components/resources/Resources.svelte

@@ -0,0 +1,45 @@
+<script>
+  const executingResources = ['luke_garages', 'ox_inventory', 'npwd'];
+</script>
+
+<div class="container">
+  {#each executingResources as resource}
+    <div class="resource-wrapper">
+      <div class="resource">
+        {resource}
+      </div>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .container {
+    width: 18vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-color: #34495e;
+    height: 100%;
+    border-top-left-radius: 0.25vh;
+    border-bottom-left-radius: 0.25vh;
+    color: white;
+    font-family: 'Inter', sans-serif;
+    user-select: none;
+  }
+
+  .resource-wrapper {
+    padding: 1vh;
+  }
+
+  .resource {
+    font-family: 'Inter', sans-serif;
+    font-size: 2.2vh;
+    width: 100%;
+    height: 5%;
+    display: block;
+  }
+
+  .resource-wrapper:hover {
+    background-color: grey;
+  }
+</style>