Add icons on tabs

frontend/src/lib/components/Tabs.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import InfoTab from './tabs/InfoTab.svelte';
+	import InfoTabTrekking from './tabs/InfoTabTrekking.svelte';
+	import InfoTabBike from './tabs/InfoTabBike.svelte';
 	import DescTab from './tabs/DescTab.svelte';
 	import MapTab from './tabs/MapTab.svelte';
 	import { createEventDispatcher, onMount } from 'svelte';
@@ -8,18 +9,22 @@
 	const dispatch = createEventDispatcher();
 
 	let ref: HTMLDivElement;
-	let component = InfoTab;
+	let component = InfoTabTrekking;
 
-	const dispatchClick = (c: InfoTab | DescTab | MapTab) => {
+	onMount(() => {
+		console.log(route)
+	})
+	const dispatchClick = (c: InfoTabTrekking | InfoTabBike | DescTab | MapTab) => {
 		component = c;
 		dispatch('tab-click', { component });
 	};
 </script>
 
 <div id="tabs">
-	<button class:active={component === InfoTab} on:click={() => dispatchClick(InfoTab)} id="info">Info</button>
-	<button class:active={component === DescTab} on:click={() => dispatchClick(DescTab)} id="desc">Descrizione</button>
-	<button class:active={component === MapTab}  on:click={() => dispatchClick(MapTab)}  id="map">Mappa</button>
+	<button class:active={component === InfoTabTrekking} on:click={() => dispatchClick(InfoTabTrekking)} id="info-trekking"> <img src='/trekking.png' alt='trekking'> </button>
+	<button class:active={component === InfoTabBike} 	 on:click={() => dispatchClick(InfoTabBike)} 	 id="info-bike">	<img src='/bike.png' alt='bike'> </button>
+	<button class:active={component === DescTab} 		 on:click={() => dispatchClick(DescTab)} 		 id="desc">			Descrizione</button>
+	<button class:active={component === MapTab}  		 on:click={() => dispatchClick(MapTab)} 	     id="map">			Mappa</button>
 </div>
 <div id="container">
 	<div class="tab" bind:this={ref} role="tab">
@@ -66,4 +71,10 @@
 		font-weight: bold !important;
 		border-bottom: 1px solid black !important;
 	}
+
+	#info-bike, #info-trekking {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
 </style>

frontend/src/lib/components/tabs/InfoTabBike.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	export let route: App.Route;
+</script>
+
+<div id="grid">
+	<div>
+		<p>Distanza</p>
+		<p>{route.route_sport_details[1].distance} m</p>
+	</div>
+
+	<div>
+		<p>Dislivello Positivo</p>
+		<p>{route.route_sport_details[1].elevation_gain}</p>
+	</div>
+
+	<div>
+		<p>Velocità Media</p>
+		<p>N/A</p>
+	</div>
+
+	<div>
+		<p>Difficolta</p>
+		<p>{route.route_sport_details[1].difficulty_it}</p>
+	</div>
+
+	<div>
+		<p>Dislivello Negativo</p>
+		<p>{route.route_sport_details[1].elevation_loss}</p>
+	</div>
+
+	<div>
+		<p>Durata</p>
+		<p>{route.route_sport_details[1].duration}'</p>
+	</div>
+
+	<div>
+		<p>Altitudine max</p>
+		<p>{route.route_sport_details[1].altitude_max}</p>
+	</div>
+
+	<div>
+		<p>Altitudine min</p>
+		<p>{route.route_sport_details[1].altitude_min}</p>
+	</div>
+
+	<div>
+		<p>Tipo Percorso</p>
+		<p>{route.route_sport_details[1].route_type_it}</p>
+	</div>
+</div>
+
+<style>
+    #grid {
+        display: grid;
+        grid-template-rows: repeat(3, 33%);
+        grid-template-columns: repeat(3, 1fr);
+        width: 100%;
+        background: white;
+        place-items: center;
+        font-size: 14px;
+    }
+
+    #grid div {
+        margin: 0 auto;
+        display: flex;
+        text-align: center;
+        flex-direction: column;
+    }
+    #grid div > p {
+        padding: 10px;
+        margin: 0px;
+    }
+    #grid div p:nth-child(2) {
+        font-weight: bold;
+        font-size: 16px;
+    }
+</style>