diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/LandingHeader.svelte | 37 | ||||
| -rw-r--r-- | src/components/LocaleSelector.svelte | 10 | ||||
| -rw-r--r-- | src/components/index.js | 1 |
3 files changed, 33 insertions, 15 deletions
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte index a8abfaba..cc743b79 100644 --- a/src/components/LandingHeader.svelte +++ b/src/components/LandingHeader.svelte @@ -1,8 +1,9 @@ <script> import { goto } from '$app/navigation'; import { scroll } from '$lib/utils'; - import { Icon } from '$comp'; + import { Icon, LocaleSelector } from '$comp'; import { user } from '$lib/store'; + import { _ } from 'svelte-i18n'; export let howItWorks; export let faq; @@ -17,25 +18,28 @@ <header class="w-full lg:w-5/6 py-5 mx-auto fixed md:sticky z-10 top-0 bg-white/90"> <nav class="block xl:flex flex-wrap justify-between items-center"> - <a href="/" class="hidden md:block"> - <Icon icon="logo" style="mx-auto mb-5 xl:mb-0" /> - </a> - <Icon icon="logo" style="block md:hidden ml-5 w-48" /> + <div class="flex justify-start md:justify-center items-center md:space-x-10"> + <a href="/" class="hidden md:block"> + <Icon icon="logo" style="mb-5 xl:mb-0" /> + </a> + <Icon icon="logo" style="block md:hidden ml-5 w-48" /> + <LocaleSelector style="hidden md:block py-1 mb-5 xl:mb-0" /> + </div> <!-- desktop nav --> <div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold"> - <button on:click={() => scroll(howItWorks)}>How It Works</button> - <button on:click={() => scroll(faq)}>FAQ</button> - <button on:click={() => scroll(about)}>About</button> + <button on:click={() => scroll(howItWorks)}>{$_('nav.howItWorks')}</button> + <button on:click={() => scroll(faq)}>{$_('nav.faq')}</button> + <button on:click={() => scroll(about)}>{$_('nav.about')}</button> {#if !$user} <button class="border rounded-full px-6 py-2 font-bold" on:click={() => goto('/register')} - >Start in Seconds + >{$_('nav.startInSeconds')} </button> <button class="bg-black text-white border rounded-full px-6 py-2 font-bold" on:click={() => goto('/login')} > - Sign in + {$_('nav.signIn')} </button> {:else} <button @@ -66,21 +70,23 @@ > <div class="space-y-8 mt-24 ml-10 font-bold text-xl"> <button on:click={() => mobileMenuButtonClick(howItWorks)} class="block" - >How It Works</button + >{$_('nav.howItWorks')}</button + > + <button on:click={() => mobileMenuButtonClick(faq)} class="block">{$_('nav.faq')}</button> + <button on:click={() => mobileMenuButtonClick(about)} class="block" + >{$_('nav.about')}</button > - <button on:click={() => mobileMenuButtonClick(faq)} class="block">FAQ</button> - <button on:click={() => mobileMenuButtonClick(about)} class="block">About</button> {#if !$user} <button class="border rounded-full px-6 py-2 font-bold block" on:click={() => goto('/register')} - >Start in Seconds + >{$_('nav.startInSeconds')} </button> <button class="bg-black text-white border rounded-full px-6 py-2 font-bold block" on:click={() => goto('/login')} > - Sign in + {$_('nav.signIn')} </button> {:else} <button @@ -95,6 +101,7 @@ Sign out </button> {/if} + <LocaleSelector style="py-1" /> </div> </div> </nav> diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte new file mode 100644 index 00000000..2ae65986 --- /dev/null +++ b/src/components/LocaleSelector.svelte @@ -0,0 +1,10 @@ +<script> + import { _, locale, locales } from 'svelte-i18n'; + export let style; +</script> + +<select name="language" bind:value={$locale} class={style}> + {#each $locales as locale} + <option value={locale}>{locale}</option> + {/each} +</select> diff --git a/src/components/index.js b/src/components/index.js index 1003a1b0..39a4e5e7 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -7,6 +7,7 @@ export { default as Icon } from './Icon.svelte'; export { default as Image } from './Image.svelte'; export { default as RegisterOrLogin } from './RegisterOrLogin.svelte'; export { default as AppHeader } from './AppHeader.svelte'; +export { default as LocaleSelector } from './LocaleSelector.svelte'; export { default as LoadingSplash } from './LoadingSplash.svelte'; export { default as PageNotFound } from './404.svelte'; export { default as About } from './About.svelte'; |