From 71d37e758fbc155a14f13989e7ed05e7719c2159 Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Sat, 20 Aug 2022 19:55:21 +0200
Subject: [PATCH] implement LinkButton component

---
 web/pw-server/src/lib/components/LinkButton.svelte | 7 +++++++
 web/pw-server/src/routes/bots/[bot_name].svelte    | 3 ++-
 web/pw-server/src/routes/matches/index.svelte      | 5 +++--
 web/pw-server/src/styles/buttons.scss              | 4 ++++
 4 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 web/pw-server/src/lib/components/LinkButton.svelte

diff --git a/web/pw-server/src/lib/components/LinkButton.svelte b/web/pw-server/src/lib/components/LinkButton.svelte
new file mode 100644
index 0000000..0d0e7d6
--- /dev/null
+++ b/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>
diff --git a/web/pw-server/src/routes/bots/[bot_name].svelte b/web/pw-server/src/routes/bots/[bot_name].svelte
index 471e530..5fe4cc7 100644
--- a/web/pw-server/src/routes/bots/[bot_name].svelte
+++ b/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>
diff --git a/web/pw-server/src/routes/matches/index.svelte b/web/pw-server/src/routes/matches/index.svelte
index a2e352c..8c106fa 100644
--- a/web/pw-server/src/routes/matches/index.svelte
+++ b/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>
-      <a class="btn btn-page-next" href={olderMatchesLink(matches)}>older</a>
+      <LinkButton href={newerMatchesLink(matches)}>Newer</LinkButton>
+      <LinkButton href={olderMatchesLink(matches)}>Older</LinkButton>
     </div>
   </div>
 </div>
diff --git a/web/pw-server/src/styles/buttons.scss b/web/pw-server/src/styles/buttons.scss
index 2aa7535..b485014 100644
--- a/web/pw-server/src/styles/buttons.scss
+++ b/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;
 }