2024-07-08 22:43:50 +02:00
|
|
|
<script lang="ts">
|
|
|
|
|
import { page } from '$app/stores';
|
2024-09-20 13:22:05 +02:00
|
|
|
import DocsContainer from '$lib/components/docs/DocsContainer.svelte';
|
2024-07-09 17:49:18 +02:00
|
|
|
import { Button } from '$lib/components/ui/button';
|
|
|
|
|
import { getURLForLanguage } from '$lib/utils';
|
2024-09-13 13:56:28 +02:00
|
|
|
import { ChevronLeft, ChevronRight, PenLine, CornerDownRight } from 'lucide-svelte';
|
|
|
|
|
import { _, locale } from 'svelte-i18n';
|
2024-07-09 17:49:18 +02:00
|
|
|
|
2024-09-20 13:22:05 +02:00
|
|
|
export let data: {
|
2024-09-20 14:22:55 +02:00
|
|
|
guideModule: any;
|
2024-09-20 13:22:05 +02:00
|
|
|
previousGuide: string | undefined;
|
2024-09-20 14:22:55 +02:00
|
|
|
previousGuideModule: any;
|
2024-09-20 13:22:05 +02:00
|
|
|
nextGuide: string | undefined;
|
2024-09-20 14:22:55 +02:00
|
|
|
nextGuideModule: any;
|
2024-09-20 13:22:05 +02:00
|
|
|
};
|
2024-07-08 22:43:50 +02:00
|
|
|
</script>
|
|
|
|
|
|
2024-09-20 13:22:05 +02:00
|
|
|
<div class="markdown flex flex-col gap-3">
|
2024-09-20 14:22:55 +02:00
|
|
|
<DocsContainer module={data.guideModule.default} />
|
2024-09-20 13:22:05 +02:00
|
|
|
</div>
|
2024-07-09 17:49:18 +02:00
|
|
|
|
2024-07-09 22:15:05 +02:00
|
|
|
<div class="flex flex-row flex-wrap gap-3 pt-6">
|
2024-09-20 13:22:05 +02:00
|
|
|
{#if data.previousGuide}
|
2024-07-09 17:49:18 +02:00
|
|
|
<Button
|
|
|
|
|
variant="outline"
|
|
|
|
|
class="mr-auto"
|
2024-09-20 13:22:05 +02:00
|
|
|
href={getURLForLanguage($locale, `/help/${data.previousGuide}`)}
|
2024-07-09 17:49:18 +02:00
|
|
|
>
|
|
|
|
|
<ChevronLeft size="14" class="mr-1 mt-0.5" />
|
2024-09-20 14:22:55 +02:00
|
|
|
{#await data.previousGuideModule then guideModule}
|
|
|
|
|
{guideModule.metadata.title}
|
|
|
|
|
{/await}
|
2024-07-09 17:49:18 +02:00
|
|
|
</Button>
|
|
|
|
|
{/if}
|
2024-09-20 13:22:05 +02:00
|
|
|
{#if data.nextGuide}
|
2024-07-09 17:49:18 +02:00
|
|
|
<Button
|
|
|
|
|
variant="outline"
|
|
|
|
|
class="ml-auto"
|
2024-09-20 13:22:05 +02:00
|
|
|
href={getURLForLanguage($locale, `/help/${data.nextGuide}`)}
|
2024-07-09 17:49:18 +02:00
|
|
|
>
|
2024-09-20 14:22:55 +02:00
|
|
|
{#await data.nextGuideModule then guideModule}
|
|
|
|
|
{guideModule.metadata.title}
|
|
|
|
|
{/await}
|
2024-07-09 17:49:18 +02:00
|
|
|
<ChevronRight size="14" class="ml-1 mt-0.5" />
|
|
|
|
|
</Button>
|
|
|
|
|
{/if}
|
|
|
|
|
</div>
|
2024-09-13 13:56:28 +02:00
|
|
|
|
|
|
|
|
<div class="flex flex-row flex-wrap justify-between items-start mt-10 gap-3">
|
|
|
|
|
<div class="flex flex-col items-start">
|
|
|
|
|
<p class="text-sm text-muted-foreground">{$_('docs.answer_not_found')}</p>
|
|
|
|
|
<Button
|
|
|
|
|
variant="link"
|
|
|
|
|
href="https://www.reddit.com/r/gpxstudio/"
|
|
|
|
|
target="_blank"
|
2024-09-21 19:15:19 +02:00
|
|
|
class="p-0 h-6 text-link"
|
2024-09-13 13:56:28 +02:00
|
|
|
>
|
|
|
|
|
<CornerDownRight size="16" class="mr-1" />
|
|
|
|
|
{$_('docs.ask_on_reddit')}
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
{#if $locale === 'en'}
|
|
|
|
|
<Button
|
|
|
|
|
variant="link"
|
|
|
|
|
href="https://github.com/gpxstudio/gpx.studio/edit/dev/website/src/lib/docs/en/{$page.params
|
|
|
|
|
.guide}.mdx"
|
|
|
|
|
target="_blank"
|
2024-09-21 19:15:19 +02:00
|
|
|
class="p-0 h-6 ml-auto text-link"
|
2024-09-13 13:56:28 +02:00
|
|
|
>
|
|
|
|
|
<PenLine size="16" class="mr-1" />
|
2024-09-13 14:07:48 +02:00
|
|
|
Edit this page on GitHub
|
2024-09-13 13:56:28 +02:00
|
|
|
</Button>
|
|
|
|
|
{:else}
|
|
|
|
|
<Button
|
|
|
|
|
variant="link"
|
|
|
|
|
href="https://crowdin.com/project/gpxstudio/{$locale}"
|
|
|
|
|
target="_blank"
|
2024-09-21 19:15:19 +02:00
|
|
|
class="p-0 h-6 ml-auto text-link"
|
2024-09-13 13:56:28 +02:00
|
|
|
>
|
|
|
|
|
<PenLine size="16" class="mr-1" />
|
|
|
|
|
{$_('docs.translate')}
|
|
|
|
|
</Button>
|
|
|
|
|
{/if}
|
|
|
|
|
</div>
|
