links, navs, and more

src/ui/ErrorAlert.svelte

@@ -49,11 +49,11 @@
 </style>
 
 
-<div transition:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass}">
+<div in:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass}">
     <div>
         <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
         <span>
-            <slot name="message"></slot>
+            <slot></slot>
         </span>
     </div>
 

src/ui/Link.svelte

@@ -0,0 +1,41 @@
+<script>
+    import { onMount } from 'svelte';
+
+    import { currentView } from '../lib/routing.js';
+
+    export let target = $currentView;
+    export let hotkey = null;
+    export let ctrl = false
+    export let alt = false;
+    export let shift = false;
+
+    function click() {
+        if (typeof target === 'string') {
+            $currentView = target;
+        }
+        else if (typeof target === 'function') {
+            target();
+        }
+        else {
+            throw(`Link target is not a string or a function: ${target}`)
+        }
+    }
+
+
+    function handleHotkey(event) {
+        if (!hotkey) return;
+        if (ctrl && !event.ctrlKey) return;
+        if (alt && !event.altKey) return;
+        if (shift && !event.shiftKey) return;
+
+        if (event.code === hotkey) click();
+        if (hotkey === 'Enter' && event.code === 'NumpadEnter') click();
+    }
+</script>
+
+
+<svelte:window on:keydown={handleHotkey} />
+
+<a href="#" on:click="{click}">
+    <slot></slot>
+</a>

src/ui/Nav.svelte

@@ -0,0 +1,23 @@
+<script>
+    import Link from './Link.svelte';
+    import Icon from './Icon.svelte';
+</script>
+
+
+<nav class="fixed top-0 grid grid-cols-2 w-full p-2">
+    <div>
+        <Link target="Home">
+            <button class="btn btn-squre btn-ghost align-middle">
+                <Icon name="home" class="w-8 h-8 stroke-2" />
+            </button>
+        </Link>
+    </div>
+
+    <div class="justify-self-end">
+        <Link target="Settings">
+            <button class="align-middle btn btn-square btn-ghost">
+                <Icon name="cog-8-tooth" class="w-8 h-8 stroke-2" />
+            </button>
+        </Link>
+    </div>
+</nav>