added tinro router

src/lib/router/Router.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Route } from 'tinro';
+
+  import Index from '$lib/router/routes/Index.svelte';
+  import CallTauri from '$router/routes/CallTauri.svelte';
+  import HashString from '$router/routes/HashString.svelte';
+  import Versions from '$router/routes/Versions.svelte';
+</script>
+
+<!-- This gives a linting error: Fix -> https://github.com/AlexxNB/tinro/pull/121/commits/d2251ffed630aac6e76e71856204ead5dd2f6661 -->
+<Route path="/"><Index /></Route>
+<Route path="/call-tauri"><CallTauri /></Route>
+<Route path="/hash-string"><HashString /></Route>
+<Route path="/versions"><Versions /></Route>

src/lib/router/routes/CallTauri.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import { invoke } from '@tauri-apps/api';
+
+  let message = '';
+
+  async function callTauri() {
+    message = await invoke('called_from_js');
+  }
+</script>
+
+<button
+  on:click={callTauri}
+  class=" font-extrabold btn btn-outline btn-primary btn-md">Call Tauri</button
+>
+<div class="relative">
+  {#key message}
+    <p
+      class="absolute outline-secondary border-b-2 border-accent text-2xl
+     whitespace-nowrap
+      -translate-x-1/2 -translate-y-1/2"
+      in:fade={{ duration: 300 }}
+    >
+      {message}
+    </p>
+  {/key}
+</div>

src/lib/router/routes/HashString.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { invoke } from '@tauri-apps/api';
+
+  let hashInput = 'Hello world';
+  let hashOutput = '';
+  $: (async () => {
+    hashOutput = await invoke('hash256sum', { hashInput });
+  })();
+</script>
+
+<div class="form-control">
+  <label class="input-group">
+    <span>Hash string</span>
+    <input
+      bind:value={hashInput}
+      type="text"
+      class="input input-bordered input-secondary focus:ring-secondary focus:border-secondary focus:outline-none"
+    />
+  </label>
+</div>
+<p class="text-center text-sm">{hashOutput}</p>

src/lib/router/routes/Index.svelte

@@ -0,0 +1,10 @@
+<div class="flex flex-col space-y-6 items-center font-bold drop-shadow-ft">
+  <h1 class="text-4xl mt-16">Welcome</h1>
+  <h2 class="text-xl">
+    This is a <span class="bg-secondary text-secondary-content rounded-md p-1"
+      >Svelte
+    </span>
+    -
+    <span class="bg-primary text-primary-content rounded-md p-1"> Tauri</span> Template
+  </h2>
+</div>

src/lib/router/routes/Versions.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { getTauriVersion, getVersion, getName } from '@tauri-apps/api/app';
+  type Versions = {
+    tauri: string;
+    app: string;
+    name: string;
+  };
+
+  const getVersions = async (): Promise<Versions> => {
+    const [tauri, app, name] = await Promise.all([
+      getTauriVersion(),
+      getVersion(),
+      getName()
+    ]);
+    return {
+      tauri,
+      app,
+      name
+    };
+  };
+</script>
+
+<h3>Versions</h3>
+<div>
+  {#await getVersions() then versions}
+    {#each Object.entries(versions) as [key, val], i (i)}
+      <div>
+        {key} - {val}
+      </div>
+    {/each}
+  {/await}
+</div>