implement LinkButton component

web/pw-server/src/lib/components/LinkButton.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  export let href: string | null;
+
+  $: isDisabled = !href;
+</script>
+
+<a class="btn" class:btn-disabled={isDisabled} {href}><slot /></a>

web/pw-server/src/routes/bots/[bot_name].svelte

@@ -35,6 +35,7 @@
   import dayjs from "dayjs";
   import { currentUser } from "$lib/stores/current_user";
   import MatchList from "$lib/components/matches/MatchList.svelte";
+  import LinkButton from "$lib/components/LinkButton.svelte";
 
   export let bot: object;
   export let owner: object;
@@ -97,7 +98,7 @@
     <MatchList {matches} />
     {#if matches.length > 0}
       <div class="btn-container">
-        <a class="btn" href={`/matches?bot=${bot["name"]}`}>All matches</a>
+        <LinkButton href={`/matches?bot=${bot["name"]}`}>All matches</LinkButton>
       </div>
     {/if}
   </div>

web/pw-server/src/routes/matches/index.svelte

@@ -49,6 +49,7 @@
 </script>
 
 <script lang="ts">
+  import LinkButton from "$lib/components/LinkButton.svelte";
   import MatchList from "$lib/components/matches/MatchList.svelte";
 
   export let matches: object[];
@@ -100,8 +101,8 @@
   <MatchList {matches} />
   <div class="page-controls">
     <div class="btn-group">
-      <a class="btn btn-page-prev" href={newerMatchesLink(matches)}>newer</a>
+      <LinkButton href={newerMatchesLink(matches)}>Newer</LinkButton>
-      <a class="btn btn-page-next" href={olderMatchesLink(matches)}>older</a>
+      <LinkButton href={olderMatchesLink(matches)}>Older</LinkButton>
     </div>
   </div>
 </div>

web/pw-server/src/styles/buttons.scss

@@ -10,6 +10,10 @@ $btn-border-color: rgba(27, 31, 36, 0.25);
   border-radius: 5px;
 }
 
+.btn.btn-disabled {
+  color: $btn-border-color;
+}
+
 .btn-group {
   display: flex;
 }