Add hunt detail

app/pages/hunt/[huntSlug]/[questSlug]/index.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const app = useNuxtApp();
+const { huntSlug, questSlug } = app.$slugData;
+</script>
+
+<template>
+  <h1>{{ huntSlug!.name }} - {{ questSlug!.name }}</h1>
+  <VaButton :to="$localePath(`/hunt/${sluggy(huntSlug!)}`)"
+    >Back to Hunt</VaButton
+  >
+</template>
+
+<style scoped></style>

app/pages/hunt/[huntSlug]/index.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+const app = useNuxtApp();
+const { user } = useUserSession();
+const localePath = useLocalePath();
+
+const { name, id } = app.$slugData.huntSlug!;
+
+const { data, pending } = await useFetch(`/api/hunt/${id}`);
+
+const hideAnswers = ref(true);
+</script>
+
+<template>
+  <h1 class="text-2xl">
+    {{ data?.name || name }}
+    <VaChip v-if="data?.totalScore" class="float-right" color="success"
+      >Total points: {{ data!!.totalScore }}</VaChip
+    >
+  </h1>
+  <div v-if="data">
+    <p>{{ data.description }}</p>
+    <p v-if="data.start">Start: {{ $d(data.start) }}</p>
+    <p v-if="data.end">End: {{ $d(data.end) }}</p>
+    <p>
+      {{ data._count.teams }} teams joined{{
+        data.ownTeam !== null ? ', just like you' : ', unlike you'
+      }}!
+    </p>
+    <div class="flex flex-row gap-2" v-if="data.ownTeam !== null">
+      <VaSwitch v-model="hideAnswers" icon="image">Hide answers</VaSwitch>
+    </div>
+    <VaDivider />
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+      <VaCard
+        v-for="quest in data.quests"
+        :key="`q-${quest.id}`"
+        :to="$localePath(`/hunt/${sluggy(data)}/${sluggy(quest)}`)"
+        :stripe="quest.answer !== null"
+        :stripe-color="
+          quest.answer?.score && quest.answer?.score > 0 ? 'success' : 'primary'
+        "
+      >
+        <VaCardTitle><QuestTags :quest="quest" /></VaCardTitle>
+        <VaImage
+          v-if="!hideAnswers && quest?.answer?.picture"
+          :src="quest?.answer?.picture"
+          class="h-32"
+          fit="cover"
+          lazy
+        >
+          <template #loader> <VaProgressCircle indeterminate /> </template
+        ></VaImage>
+        <VaCardContent>
+          <p class="line-clamp-1">{{ quest.description }}</p>
+          <div v-if="!hideAnswers && quest.answer?.text">
+            <VaDivider />
+            <p class="line-clamp-1">
+              {{ quest.answer?.text }}
+            </p>
+          </div>
+        </VaCardContent>
+      </VaCard>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

app/pages/index.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts"></script>
 
 <template>
-  <h1 class="text-3xl">{{ $t('hello') }}</h1>
+  <h1 class="text-primary text-3xl">{{ $t('hello') }}</h1>
+  <VaButton icon="home" :to="$localePath('/hunt/bremer-stadtrallye-1')" />
 </template>
 
 <style scoped></style>