1  <script lang="ts">
 2    import type { Route } from "@app/lib/router/definitions";
 3  
 4    import { createEventDispatcher } from "svelte";
 5    import { push, routeToPath, useDefaultNavigation } from "@app/lib/router";
 6  
 7    export let route: Route;
 8    export let disabled: boolean = false;
 9    export let styleHoverState: boolean = false;
10    export let styleTextOverflow: boolean = false;
11    export let title: string | undefined = undefined;
12    export let style: string | undefined = undefined;
13  
14    const dispatch = createEventDispatcher<{
15      afterNavigate: null;
16    }>();
17  
18    function navigateToRoute(event: MouseEvent): void {
19      if (disabled) {
20        event.preventDefault();
21        return;
22      }
23  
24      if (useDefaultNavigation(event)) {
25        return;
26      }
27  
28      event.preventDefault();
29      void push(route);
30      dispatch("afterNavigate");
31    }
32  </script>
33  
34  <style>
35    .hover-style:hover {
36      text-decoration: underline;
37      text-decoration-thickness: 1px;
38      text-underline-offset: 2px;
39    }
40  </style>
41  
42  <a
43    class:txt-overflow={styleTextOverflow}
44    class:hover-style={styleHoverState}
45    on:click={navigateToRoute}
46    href={routeToPath(route)}
47    {title}
48    {style}>
49    <slot />
50  </a>