ora/src/dashboard/App.svelte

<script>
  import Router, { link } from 'svelte-spa-router'

  import Toasts from './components/Toasts.svelte'
  import Dev from './components/Dev.svelte'
  import Dashboard from './pages/Dashboard.svelte'
  import Limits from './pages/Limits.svelte'
  import Footer from './components/Footer.svelte'
  import Options from './pages/Options.svelte'

  import { isDev } from '../shared/utils'

  const routes = {
    '/': Dashboard,
    '/options': Options,
    '/limits': Limits,
  }
</script>

{#if isDev}
  <Dev />
{/if}
<main>
  <div class="mb-8">
    <!-- svelte-ignore a11y-missing-attribute -->
    <a use:link={'/'}><button class="btn">Dashboard</button></a>
    <!-- svelte-ignore a11y-missing-attribute -->
    <a use:link={'/limits'}><button class="btn">Limits</button></a>
    <!-- svelte-ignore a11y-missing-attribute -->
    <a use:link={'/options'}><button class="btn">Options</button></a>
  </div>

  <Router {routes} />
  <Toasts />
  <Footer />
</main>

<style>
  main {
    padding: 1em;
    margin: auto;
    width: 100%;
    max-width: 50em;
  }
</style>