Same as previous commit

src/lib/islands/quick-link-island.svelte

@@ -1,19 +1,19 @@
 <script>
     import Island from "$lib/islands/island.svelte";
+    import { ql } from "$lib/stores/quick-links.js"
     export let variables = {
         title: "Quick Links",
     };
 
-    let quicklinks = ['avn','1f21','2c98','bru','bri','bth','olf']
 </script>
 
 <Island {variables}>
-
-    {#if !quicklinks.length}
+    
+    {#if $ql.length === 0}
     <p>Go to <a href="/null">settings</a> to add your Quick Links</p>
     {/if}
     <div class="buttons">
-        {#each quicklinks as link}
+        {#each $ql as link}
             {#if link.length === 3}
                 <a class="link" href="/ldb?station={link}">
                    {link.toUpperCase()}

src/lib/islands/quick-link-set-island.svelte

@@ -0,0 +1,104 @@
+<script>
+    import Island from "$lib/islands/island.svelte";
+    import { ql } from "$lib/stores/quick-links.js";
+    export let variables = {
+      title: "Quick Links",
+    };
+  
+    let qlData =[]
+    $: {
+        qlData = $ql;
+        console.log(qlData);
+    }
+
+    function saveQl() {
+      // Fetch the content of all text entries within the island then run ql.set([ARRAY OF INPUT CONTENT])
+      const inputs = document.getElementsByClassName('qlInput');
+      let inputLinks = []
+      for (let item of inputs) {
+        let text = item?.value;
+        if (text !== '') {
+            inputLinks.push(text);
+        }
+      }
+      console.log(inputLinks)
+      ql.set(inputLinks)
+    }
+
+    function clearQl() {
+        ql.set([]);
+    }
+
+    function addQlBox() {
+        const updatedQl = [...$ql, ""];
+        $ql = updatedQl;
+        ql.set(updatedQl);
+    }
+
+    function handleClick(event) {
+      // Handle the click event here
+      console.log("Island Clicked");
+      // You can access the `variables` passed to the Island component here if needed
+    }
+  </script>
+  
+  <Island on:click={handleClick} {variables}>
+    {#if $ql.length === 0}
+      <p>Click the + button to add links</p>
+    {/if}
+    <div id="buttons" class="buttons">
+      {#each qlData as link}
+        <input class="qlInput" type="text" value={link}>
+      {/each}
+      <button on:click={addQlBox} id="qlAdd">+</button>
+    </div>
+    <button on:click={saveQl}>Save</button>
+    <button on:click={clearQl}>Clear</button>
+  </Island>
+  
+
+<style>
+    p {
+        margin-bottom: 0;
+    }
+    #qlAdd {
+        width: 40px;
+    }
+    .buttons {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        width: 90%;
+        margin: auto;
+        padding-top: 5px;
+    }
+    input {
+        flex: 1;
+        width: 20%;
+        min-width: 50px;
+        margin: 5px;
+        border: none;
+        border-radius: 20px;
+        padding: 5px;
+        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        font-size: 16px;
+        font-weight: 400;
+        text-decoration: none;
+        text-align: center;
+        text-transform: uppercase;
+    }
+    button {
+        width: 30%;
+        margin-bottom: 5px;
+        margin-top: 10px;
+        border: none;
+        border-radius: 20px;
+        padding: 5px;
+        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        font-size: 16px;
+        font-weight: 400;
+        background-color: var(--main-bg-color);
+        color: var(--link-color);
+    }
+</style>