implement basic topic view

src/App.vue

@@ -28,7 +28,7 @@ onMounted (async () => {
     <SearchBar />
   </header>
 
-  <main class="flex flex-row max-w-5xl m-auto">
+  <main class="max-w-5xl m-auto">
     <RouterView>
     </RouterView>
   </main>

src/components/papers/TopicList.vue

@@ -79,7 +79,9 @@ onUpdated(() => {
       <article
         class="p-4 rounded-lg bg-background-100 dark:bg-background-900"
       >
-        <p class="text-xl">{{ topic.papers[0].name }}</p>
+        <RouterLink :to="'themen/' + topic.reference">
+          <p class="text-xl">{{ topic.papers[0].name }}</p>
+        </RouterLink>
         <p>
           {{ date(topic.papers[0].published_at) }}: 
           <a 

src/router/index.ts

@@ -13,7 +13,7 @@ const routes: Array<any> = [
   }, {
     path: '/themen/:reference', 
     name: 'topics.show', 
-    component: ()=>import("@/views/TopicsShow.vue")
+    component: ()=>import("@/views/TopicShow.vue")
   }, { 
     path: '/karte', 
     name: 'map', 

src/views/TheTopics.vue

@@ -4,6 +4,10 @@ import TopicList from '@/components/papers/TopicList.vue'
 </script>
 
 <template>
-  <FilterSidebar />
+  <div
-  <TopicList />
+    class="flex flex-row"
+    >
+    <FilterSidebar />
+    <TopicList />
+  </div>
 </template>

src/views/TopicShow.vue

@@ -1,20 +1,51 @@
 <script setup lang="ts">
-/* import { computed } from 'vue'
+import { computed } from 'vue'
-import type { Paper } from '@/types'
+import { useRoute, useRouter } from 'vue-router';
-import { useRoute } from 'vue-router'
+import { state } from '@/stores';
+import type { Topic } from '@/types';
 
-const props = defineProps({
+const router = useRouter()
-  papers: Array<Paper>,
-})
 const route = useRoute()
-const topicId = computed(() => {
+
-  return route.params.id
+const routeId = computed(() => {
+  return route.params.reference
 })
 const topic = computed(() => {
-  return props.papers?.find( (paper: any) => paper.reference == topicId.value )
+  return state.topics?.find( (topic: Topic) => topic.reference == routeId.value )
-}) */
+})
+const firstPaper = computed(() => {
+  return topic.value?.papers[0]
+})
+
+function goBack() {
+  return router.go(-1)
+}
 </script>
 
 <template>
-  {{ $route.name }}
+  <div class="flex flex-row gap-4 justify-center mt-4">
+    <button
+      class="bg-background-100 dark:bg-background-900 p-4 rounded-lg"
+      @click.prevent="goBack()"
+      >🔙
+    </button>
+    <p>{{ topic?.papers[0].name }}</p>
+    <p>{{ routeId }}</p>
+    <a
+      class="bg-background-100 dark:bg-background-900 p-4 rounded-lg"
+      :href="firstPaper?.url"
+      >🔗
+    </a>
+  </div>
+  <div class="p-8 mt-10 bg-background-100 dark:bg-background-900 rounded-xl">
+    <p class="text-2xl">Dokumente</p>
+    <ul class="list-disc">
+      <li
+        v-for="(paper, i) of topic?.papers"
+        :key="i"
+        >
+        <p>{{ paper.name }}</p>
+      </li>
+    </ul>
+  </div>
 </template>