From 8595411c39268bf45ffed8dd3f8dae2a915a98b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 3 Feb 2026 19:59:55 +0100
Subject: [PATCH] Added audio type

---
 app/ui/Table.vue | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/ui/Table.vue b/app/ui/Table.vue
index 94f7d0e..2a30774 100644
--- a/app/ui/Table.vue
+++ b/app/ui/Table.vue
@@ -3,8 +3,9 @@ export type Row = {
 	name: string
 	class?: string
 	width?: string
-	type?: "image"
-	imagePrefix?: string
+	type?: "image" | "audio"
+	prefix?: string
+	suffix?: string
 	displayName?: string
 }
 
@@ -34,11 +35,16 @@ const { rows, data } = defineProps<TableProps>()
 			<tr v-for="(item, i) in data" :key="i">
 				<td v-for="(row, j) in rows" :key="j">
 					<slot :name="row.name" :item="item" :index="i">
-						<p v-if="row.type != 'image'">{{ item[row.name] }}</p>
 						<nuxt-img
-							v-else-if="row.type == 'image'"
-							:src="`${row.imagePrefix}${item[row.name]}`"
+							v-if="row.type == 'image'"
+							:src="`${row.prefix}${item[row.name]}`"
 						/>
+						<audio
+							v-else-if="row.type == 'audio'"
+							controls
+							:src="`${row.prefix}${item[row.name]}${row.suffix}`"
+						/>
+						<p v-else>{{ item[row.name] }}</p>
 					</slot>
 				</td>
 			</tr>
@@ -73,5 +79,10 @@ const { rows, data } = defineProps<TableProps>()
 		height: 60px;
 		border-radius: $border-radius-standard;
 	}
+
+	& audio {
+		max-width: 200px;
+		padding: 5px 0;
+	}
 }
 </style>