adds new trail page

This commit is contained in:
Christian Beutel
2024-01-29 00:41:54 +01:00
parent b302ccded0
commit 2d4c673060
28 changed files with 783 additions and 115 deletions

View File

@@ -1,43 +1,8 @@
<script lang="ts">
import CategoryCard from "$lib/components/category_card.svelte";
import TrailCard from "$lib/components/trail_card.svelte";
import type { Category } from "$lib/models/category";
import type { Trail } from "$lib/models/trail";
const categories: Category[] = [
{
name: "Hiking",
img: "https://images.unsplash.com/photo-1551632811-561732d1e306?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
name: "Walking",
img: "https://images.unsplash.com/photo-1606474226448-4aa808468efc?q=80&w=3380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
name: "Biking",
img: "https://images.unsplash.com/photo-1629626495452-37bfe96e142b?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
name: "Climbing",
img: "https://images.unsplash.com/photo-1605548109944-9040d0972bf5?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGNsaW1iaW5nfGVufDB8fDB8fHww",
},
{
name: "Skiing",
img: "https://images.unsplash.com/photo-1616429553002-faf23468952d?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
];
const trails: Trail[] = [
{
name: "Breitenstein",
location: "Fischbachau",
distance: 4000,
height: 1400,
img: "https://images.unsplash.com/photo-1570641963303-92ce4845ed4c?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
category: categories[0],
description: ""
},
];
import { categories } from "$lib/stores/category_store";
import { trails } from "$lib/stores/trail_store";
</script>
<section class="hero flex justify-center items-center" style="height: 50vh">
@@ -60,8 +25,8 @@
id="trails"
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 justify-items-center gap-8 py-8"
>
{#each trails as trail,i}
<a href="/trail/{i}"> <TrailCard {trail}></TrailCard></a>
{#each $trails as trail}
<a href="/trail/{trail.id}"> <TrailCard {trail}></TrailCard></a>
{/each}
</div>
</section>
@@ -71,7 +36,7 @@
id="categories"
class="grid grid-cols- sm:grid-cols-2 lg:grid-cols-4 justify-items-center gap-8 py-8"
>
{#each categories as category}
{#each $categories as category}
<CategoryCard {category}></CategoryCard>
{/each}
</div>