Merge pull request #1 from coinos/i18n

Add Internationalization to CoinOS

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';