dislpaying tenant list

Signed-off-by: jackdisalvatore <[email protected]>

Author: JackDiSalvatore

frontend/src/lib/components/SideBarMainContentLayout/SideBarMainContentLayout.svelte

@@ -0,0 +1,27 @@
+<div class="layout-container">
+	<aside class="side-bar h-full">
+		<slot name="side-bar" />
+	</aside>
+	<div class="main-content"><slot name="main-content" /></div>
+</div>
+
+<style>
+	.layout-container {
+		height: 100%;
+		display: grid;
+		grid-template-columns: 400px auto;
+	}
+	.main-content {
+		flex-grow: 1;
+		height: 100%;
+	}
+
+	.side-bar {
+		position: relative;
+		width: 400px;
+	}
+
+	aside {
+		overflow-y: auto;
+	}
+</style>

frontend/src/lib/components/Tenants/Tenants.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Button, List } from 'stwui';
+
+	export let tenants;
+</script>
+
+{#if tenants}
+	<div class="h-full">
+		<List divided={false}>
+			{#each tenants as tenant}
+				<List.Item class="m-2 rounded-md py-0">
+					<Button class="flex w-full justify-start" on:click={() => alert('TODO')}>
+						{tenant.name}
+					</Button>
+				</List.Item>
+			{/each}
+		</List>
+	</div>
+{/if}

frontend/src/routes/tenant/+layout.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import SideBarMainContentLayout from '$lib/components/SideBarMainContentLayout/SideBarMainContentLayout.svelte';
+</script>
+
+<SideBarMainContentLayout>
+	<slot slot="side-bar" />
+	<div slot="main-content" class="relative flex h-full" id="main-content"></div>
+</SideBarMainContentLayout>
+
+<style>
+	#main-content {
+		background-color: hsl(var(--background));
+	}
+</style>

frontend/src/routes/tenant/+page.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
 	import { useUnityAuthContext } from '$lib/context/UnityAuthContext';
+	import Tenants from '$lib/components/Tenants/Tenants.svelte';
 
 	const unityAuthContext = useUnityAuthContext();
 	const user = unityAuthContext.user;
 </script>
 
 {#if $user && $user.tenants}
-	<ul>
-		{#each $user.tenants as tenant}
-			<li>{tenant.name}</li>
-		{/each}
-	</ul>
+	<Tenants tenants={$user.tenants} />
 {/if}