implement LinkButton component
This commit is contained in:
parent
329fc73b94
commit
71d37e758f
4 changed files with 16 additions and 3 deletions
7
web/pw-server/src/lib/components/LinkButton.svelte
Normal file
7
web/pw-server/src/lib/components/LinkButton.svelte
Normal 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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue