40 lines
969 B
Svelte
40 lines
969 B
Svelte
<script lang="ts">
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
export let moreAvailable: boolean = false;
|
|
export let isLoading: boolean = false;
|
|
let displayText = '';
|
|
let title = '';
|
|
let disabled: boolean;
|
|
|
|
$: displayText = isLoading ? 'Loading...' : 'Load More';
|
|
$: disabled = !moreAvailable || isLoading;
|
|
$: title = moreAvailable ? 'Load More' : 'No more posts available';
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
function loadOlderPosts() {
|
|
dispatch('loadOlderPosts');
|
|
}
|
|
</script>
|
|
|
|
<button on:click={loadOlderPosts} {disabled} {title}>{displayText}</button>
|
|
|
|
<style>
|
|
button {
|
|
padding: 0.75em;
|
|
border-radius: 3px;
|
|
border: none;
|
|
background-color: var(--color-link);
|
|
color: white;
|
|
cursor: grab;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
button:hover:not(:disabled) {
|
|
background-color: var(--color-link-visited);
|
|
}
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
background-color: grey;
|
|
}
|
|
</style> |