working on modpack ui

fclauncher/frontend/src/AdminSettings.svelte

@@ -1,25 +1,83 @@
 <script lang="ts">
+    import {onMount} from 'svelte'
+    import { GetModpacks, QuerryModpacks } from '../wailsjs/go/main/ModpackManager';
 
+    var modpacks = []
+    var selectedPack = []
+
+    onMount(() => {
+        QuerryModpacks().then(() => {
+            GetModpacks().then((result) => {
+                modpacks = result
+                pack = modpacks[0]
+            })
+        })   
+    })
+
+    function select(modpack) {
+        selectedPack = modpack
+    }
 </script>
 <main>
+    <p>Selectec pack: {selectedPack.Name}</p>
     <div class="container">
-        Admin Settings Placeholder        
+        <div class="modpackList">
+            {#each modpacks as pack}
+                {#if pack == selectedPack}
+                    <div on:click={select(pack)} class="modpackElementSelected">{pack.Name}</div>
+                {:else}
+                    <div on:click={select(pack)} class="modpackElement">{pack.Name}</div>
+                {/if}
+            {/each}
+        </div>
+        <div class="modpackOptions">
+        </div>
     </div>
 
 </main>
 <style>
 * {
+    display: box;
    box-sizing: border-box;
     font-family: sans-serif;
     --text-primary: #b6b6b6;
 		--text-secondary: #ececec;
 		--bg-primary: #23232e;
 		--bg-secondary: #141418;
+    width: 100%;
         
 }
 .container{
     display: flex;
-    justify-content: center;
+    justify-content: left;
     margin: 3rem;
 }
+.modpackList {
+    display: flex;
+    flex-direction: column;
+    background-color: #141418;
+    float: left;
+    width: 60%;
+    height: 20em;
+    align-items: center;
+    gap: 2px;
+}
+.modpackElement {
+    width: 100%;
+    background-color: #23232e;
+}
+
+.modpackElement:hover {
+    background-color: #303030;
+}
+
+.modpackElementSelected {
+    width: 100%;
+    background-color: #707070;
+}
+
+.modpackElementSelected:hover {
+    background-color: #303030;
+}
+
 </style>