From f519e80df456c2cd4da06008396a0f986eaa94c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katharina=20W=C3=BCnsche?= <katharina_wunsche@yahoo.de>
Date: Mon, 29 Jul 2024 16:03:03 +0200
Subject: [PATCH] Display references in vertical timeline

---
 .../timeline/vertical-timeline-entry.vue      | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/components/timeline/vertical-timeline-entry.vue b/components/timeline/vertical-timeline-entry.vue
index 3fc5c28..e8d501e 100644
--- a/components/timeline/vertical-timeline-entry.vue
+++ b/components/timeline/vertical-timeline-entry.vue
@@ -2,6 +2,8 @@
 import { bgColors } from "@/lib/colors";
 import type { TimelineObject } from "@/types/timeline";
 
+import ReferenceButton from "../reference-button.vue";
+
 const localePath = useLocalePath();
 
 const props = defineProps<{
@@ -82,9 +84,14 @@ const itemClass = computed(() => {
 					:to="localePath(`/detail/${i.class}/${i.to.id}`)"
 					class="flow-root rounded-md p-2 transition duration-150 ease-in-out hover:bg-neutral-100 focus:outline-none focus-visible:ring dark:hover:bg-neutral-900"
 				>
-					<span class="block text-sm text-neutral-500">
+					<div class="flex items-center justify-between text-sm text-neutral-500">
 						{{ i.name }}
-					</span>
+						<ReferenceButton
+							v-if="i.references.length > 0"
+							:references="i.references"
+							class="inline-block size-4 text-neutral-900 dark:text-neutral-100"
+						></ReferenceButton>
+					</div>
 					<span>
 						<span class="text-sm font-medium text-neutral-900 dark:text-neutral-100">
 							{{ i.to.name }}
@@ -97,9 +104,14 @@ const itemClass = computed(() => {
 					:to="localePath(`/detail/${item.class}/${item.to.id}`)"
 					class="flow-root rounded-md p-2 transition duration-150 ease-in-out hover:bg-neutral-100 focus:outline-none focus-visible:ring dark:hover:bg-neutral-900"
 				>
-					<span class="block text-sm text-neutral-500">
+					<div class="flex items-center justify-between text-sm text-neutral-500">
 						{{ item.name }}
-					</span>
+						<ReferenceButton
+							v-if="item.references.length > 0"
+							:references="item.references"
+							class="inline-block size-4 text-neutral-900 dark:text-neutral-100"
+						></ReferenceButton>
+					</div>
 					<span>
 						<span class="text-sm font-medium text-neutral-900 dark:text-neutral-100">
 							{{ item.to.name }}