50 lines
1.1 KiB
Svelte
50 lines
1.1 KiB
Svelte
<script>
|
|
import { m } from "$lang/messages";
|
|
import { getLocale, locales, setLocale } from "$lang/runtime";
|
|
import { LanguagesIcon } from "@lucide/svelte";
|
|
import SettingsButton from "../settings/SettingsButton.svelte";
|
|
import { view } from "../../view.svelte";
|
|
import Button from "$lib/components/ui/button/button.svelte";
|
|
import { setOnboardingState } from "$lib/onboarding.svelte";
|
|
</script>
|
|
|
|
<h1 style="font-size: 2em; font-weight: bold;">
|
|
{m["sidebar.onboarding.welcome"]()}
|
|
</h1>
|
|
<h2>{m["sidebar.onboarding.choose-lang"]()}</h2>
|
|
|
|
<div id="languages">
|
|
{#each locales as locale, _index (locale)}
|
|
<SettingsButton
|
|
text={m["language.name"]({}, { locale })}
|
|
icon={LanguagesIcon}
|
|
onclick={() => {
|
|
setOnboardingState("vehicles");
|
|
if (locale != getLocale()) {
|
|
setLocale(locale);
|
|
} else {
|
|
view.switch("onboarding-vehicles");
|
|
}
|
|
}}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
|
|
<Button
|
|
variant="link"
|
|
onclick={() => {
|
|
setOnboardingState("end");
|
|
view.switch("main");
|
|
view.history = [];
|
|
}}>{m["sidebar.onboarding.skip"]()}</Button
|
|
>
|
|
|
|
<style>
|
|
#languages {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
</style>
|