explore fix

src/routes/explore/explore.svelte

@@ -4,6 +4,7 @@
 	import Top from './Components/Top.svelte'
 	import { getExpiriences } from '$lib/utils/database/game'
 	import Loading from '$lib/components/Common/Loading.svelte'
+	import Comparment from '../homepage/Components/Comparment.svelte'
 
 	let Search: string
 </script>
@@ -17,9 +18,7 @@
 				<Loading />
 			</div>
 		{:then expiriences}
-			{#each expiriences as result}
-				<Result name={result.name} location={result.location} link={result.link} />
-			{/each}
+			<Comparment direction="col" items={expiriences} />
 		{/await}
 
 		<div class="end" />

src/routes/homepage/Components/Comparment.svelte

@@ -1,17 +1,18 @@
-<script>
+<script lang="ts">
 	import { navigate } from '$lib/router'
 	import CompartmentItem from './Compartment_Item.svelte'
 	import Headline from './Headline.svelte'
 
 	export let items = []
+	export let direction: 'col' | 'row' = 'row'
 </script>
 
 <div class="section">
 	<Headline content="Inspiration on your trip" />
 
-	<div class="options">
+	<div class={`options ${direction === 'row' ? 'flex-row' : 'flex-col'}`}>
 		{#each items as item}
-			<CompartmentItem on:click={() => navigate(`${item.ExpURL}`)} price={item.price} city={item.city} name={item.ExpName} image={item.ExpImage} />
+			<CompartmentItem on:click={() => navigate(`${item.ExpURL}`)} city={item.city} name={item.ExpName} image={item.ExpImage} />
 		{/each}
 	</div>
 </div>
@@ -34,7 +35,6 @@
 
 	.section > .options {
 		display: flex;
-		flex-direction: row;
 		gap: 12px;
 
 		align-items: flex-start;