Files
voyage/src/routes/shared/[key]/+page.svelte

40 lines
1.1 KiB
Svelte

<script lang="ts">
import type { Adventure } from "$lib/utils/types";
export let data;
let array = data.adventureArray as Adventure[];
import AdventureCard from "$lib/components/AdventureCard.svelte";
</script>
<!-- loop through each adventure -->
<!-- {#each array as adventure}
<div>
<h1>{adventure.name}</h1>
<p>{adventure.location}</p>
<p>{adventure.date}</p>
<p>{adventure.id}</p>
</div>
{/each} -->
<h1 class="text-center font-bold text-4xl">Shared Adventure List</h1>
<h2 class="text-center text-2xl">By {data.name} on {data.date}</h2>
<div
class="grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 mt-4 content-center auto-cols-auto ml-6 mr-6"
>
{#each array as adventure (adventure.id)}
<AdventureCard
type="shared"
id={adventure.id}
name={adventure.name}
location={adventure.location}
date={adventure.date}
/>
{/each}
</div>
<svelte:head>
<title>Shared List by {data.name} | AdventureLog</title>
<meta
name="description"
content="Shared Adventure List from around the world. Add them to your visited list!"
/>
</svelte:head>