Componentize islands

src/lib/islands/input-island.svelte

@@ -0,0 +1,41 @@
+<script>
+    import Island from "$lib/islands/island.svelte";
+    export let variables = {
+        title: "Uninitialised",
+        action: "/",
+        placeholder: "Uninitialised",
+        queryName: "uninitiailsed"
+    };
+</script>
+
+<form action={variables.action}>
+    <input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder}>
+    <br>
+    <button class="form-button" type="submit">Submit</button>
+</form>
+
+<style>
+    .form-input {
+        width: 75%;
+        height: 30px;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        border-radius: 50px;
+        border: none;
+        text-align: center;
+        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    }
+    .form-button {
+        width: 50%;
+        margin-bottom: 5px;
+        margin-top: 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;
+        background-color: var(--main-bg-color);
+        color: var(--link-color);
+    }
+</style>

src/lib/islands/island.svelte

@@ -0,0 +1,25 @@
+<script>
+    export const title = "Uninitialised"
+</script>
+
+<div>
+    <span>{title}</span>
+    <slot />
+</div>
+
+<style>
+span {
+    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-weight: 600;
+    font-size: 20px;
+}
+div {
+    width: 75%;
+    max-width: 400px;
+    margin: auto;
+    margin-top: 25px;
+    padding: 10px;
+    background-color: var(--overlay-color);
+    border-radius: 10px;
+}
+</style>

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

@@ -0,0 +1,4 @@
+<script>
+
+</script>
+

src/lib/navigation/nav.svelte

@@ -3,20 +3,17 @@
       {
         title: "Home",
         path: "/",
-        svgPath: "/images/navigation/home.svg",
-        pngPath: "/images/nav/home_icon-25.png"
+        svgPath: "/images/navigation/home.svg"
       },
       {
         title: "PIS Finder",
         path: "/pis",
-        svgPath: "/images/navigation/info.svg",
-        pngPath: ""
+        svgPath: "/images/navigation/info.svg"
       },
       {
         title: "More",
         path: "/more",
-        svgPath: "/images/navigation/more.svg",
-        pngPath: "/images/nav/hamburger.svg"
+        svgPath: "/images/navigation/more.svg"
       }
     ]
     import { page } from "$app/stores";