implement LinkButton component

This commit is contained in:
Ilion Beyst 2022-08-20 19:55:21 +02:00
parent 329fc73b94
commit 71d37e758f
4 changed files with 16 additions and 3 deletions

View file

@ -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>

View file

@ -35,6 +35,7 @@
import dayjs from "dayjs"; import dayjs from "dayjs";
import { currentUser } from "$lib/stores/current_user"; import { currentUser } from "$lib/stores/current_user";
import MatchList from "$lib/components/matches/MatchList.svelte"; import MatchList from "$lib/components/matches/MatchList.svelte";
import LinkButton from "$lib/components/LinkButton.svelte";
export let bot: object; export let bot: object;
export let owner: object; export let owner: object;
@ -97,7 +98,7 @@
<MatchList {matches} /> <MatchList {matches} />
{#if matches.length > 0} {#if matches.length > 0}
<div class="btn-container"> <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> </div>
{/if} {/if}
</div> </div>

View file

@ -49,6 +49,7 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import LinkButton from "$lib/components/LinkButton.svelte";
import MatchList from "$lib/components/matches/MatchList.svelte"; import MatchList from "$lib/components/matches/MatchList.svelte";
export let matches: object[]; export let matches: object[];
@ -100,8 +101,8 @@
<MatchList {matches} /> <MatchList {matches} />
<div class="page-controls"> <div class="page-controls">
<div class="btn-group"> <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> </div>
</div> </div>

View file

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