Start work on share tab

web-frontend/src/lib/AddressInput.svelte

@@ -24,7 +24,7 @@ placeholder="Enter address"></Svelecte>
 </script>
 
 <div class="mb-4">
-	<label class="text-gray-700 text-sm font-bold mb-2" for="username">Address</label>
+	<label class="text-gray-700 text-sm font-bold mb-2" for="username">xpin Address</label>
 	<input
 		class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-96"
 		type="text"

web-frontend/src/lib/CoordinateInput.svelte

@@ -26,7 +26,7 @@
 		</select>
 	</label>
 	<input
-		class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-full"
+		class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-96"
 		type="text"
 		bind:value
 		placeholder="0.00"

web-frontend/src/routes/app/+page.svelte

@@ -6,8 +6,24 @@
 	import CoordinateInput from '$lib/CoordinateInput.svelte';
 	import { browser } from '$app/environment';
 	import Error from './Error.svelte';
+	import TabSelector from './TabSelector.svelte';
+	import CoordinateInfo from './CoordinateInfo.svelte';
 	import { emptyxpin } from '$lib/common.js';
 
+let tabInfo = {
+    selected: 0,
+    tabs: [
+        {
+            label: "Map",
+            idx: 0,
+        },
+        {
+            label: "Share",
+            idx: 1,
+        }
+    ]
+};
+
 	let initSuccess = false;
 	let coordinateTypes = [];
 	let selectedCoordinateType;
@@ -158,9 +174,6 @@
 {#await init()}
 	<p class="text-lg js-only">Loading WebAssembly module...</p>
 {:then}
-	<p>Address: <span class="font-bold">{addr.address}</span></p>
-	<p class="text-sm">({addr.latLon}) => ({addr.latLon})</p>
-
 	<AddressInput bind:value={addrInputValue} on:change={addressInput} />
 
 	<CoordinateInput
@@ -170,10 +183,17 @@
 		bind:coordinateTypes
 		bind:selectedCoordinateType
 	/>
+
+    <TabSelector bind:tabInfo />
+
+    {#if tabInfo.selected === 1}
+    <CoordinateInfo bind:xpin={addr} />
+    {/if}
+
 {:catch message}
 	<Error {message}>Could not start core module</Error>
 {/await}
 
-<span class:invisible={!initSuccess}>
+<span class:invisible={!initSuccess || tabInfo.selected !== 0}>
 	<Map bind:map {onMapClick} on:locationfound={locationfound} />
 </span>

web-frontend/src/routes/app/CoordinateInfo.svelte

@@ -0,0 +1,5 @@
+<script>
+    export let xpin;
+</script>
+
+Hi there

web-frontend/src/routes/app/TabSelector.svelte

@@ -0,0 +1,14 @@
+<script>
+    export let tabInfo;
+
+    const updateSelectedTab = (tab) => {
+        tabInfo.selected = tab.idx;
+    }
+</script>
+
+<ul class="flex">
+    {#each tabInfo.tabs as tab}
+        <li class:bg-blue-200="{tab.idx === tabInfo.selected}" on:click={() => updateSelectedTab(tab)} class="p-2 block">{tab.label}</li>
+    {/each}
+</ul>
+