<script lang="ts">
  import ThemeSwitcher from "./lib/components/ThemeSwitcher.svelte";
  import Router from 'svelte-spa-router'
  import Home from './lib/pages/Home.svelte';
  import Viewer from "./lib/pages/Viewer.svelte";
  import About from "./lib/pages/About.svelte";

  const routes = {
    '/about': About,
    '/:id': Viewer,
    '*': Home
  };
</script>

<div class="float-right p-5">
  <ThemeSwitcher />
</div>

<main class="p-10">
  <a href="/#/" class="text-3xl font-bold">Pastabble</a><br/>
  <i>Fast and free pastebin alternative brought to you by the Plabble team</i><br/>
  <div>
    <a class="font-medium text-blue-600 dark:text-blue-500 hover:underline" href="/#/">Home</a>
    -
    <a class="font-medium text-blue-600 dark:text-blue-500 hover:underline" href="/#/about">About / using from terminal</a>
  </div>
  
  <Router {routes} />
</main>
