MapComplete/src/UI/Walkthrough/Walkthrough.svelte

32 lines
740 B
Svelte

<script lang="ts">
import * as nmd from "nano-markdown";
import { createEventDispatcher } from "svelte";
import WalkthroughStep from "./WalkthroughStep.svelte";
import FromHtml from "../Base/FromHtml.svelte";
/**
* Markdown
*/
export let pages: string[];
let currentPage: number = 0;
const dispatch = createEventDispatcher<{ done }>();
function step(incr: number) {
if (incr > 0 && currentPage + 1 === pages.length) {
dispatch("done");
currentPage = 0
return
}
currentPage = Math.min(Math.max(0, currentPage + incr), pages.length);
}
</script>
<WalkthroughStep on:back={() => step(-1)} on:next={() => step(1)}>
<FromHtml src={nmd(pages[currentPage])} />
</WalkthroughStep>