From 111a3cc677b7eb82ff0171eaa7e0faf62d757042 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 16 Dec 2025 16:46:30 +0100
Subject: [PATCH] Add Modal and Table components: implement modal functionality
 and table structure with props

---
 app/ui/Modal.vue | 40 ++++++++++++++++++++++++++++++++++++++++
 app/ui/Table.vue | 42 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 app/ui/Modal.vue
 create mode 100644 app/ui/Table.vue

diff --git a/app/ui/Modal.vue b/app/ui/Modal.vue
new file mode 100644
index 0000000..66fc2c5
--- /dev/null
+++ b/app/ui/Modal.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const open = defineModel("open")
+</script>
+
+<template>
+	<Transition>
+		<div class="modal-container" v-show="open" @click="open = false">
+			<Card @click.stop>
+				<slot />
+			</Card>
+		</div>
+	</Transition>
+</template>
+
+<style lang="scss" scoped>
+.modal-container {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 10;
+
+	width: 100vw;
+	height: 100vh;
+
+	backdrop-filter: blur(10px);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.v-enter-active,
+.v-leave-active {
+	transition: opacity 0.2s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+	opacity: 0;
+}
+</style>
diff --git a/app/ui/Table.vue b/app/ui/Table.vue
new file mode 100644
index 0000000..c776432
--- /dev/null
+++ b/app/ui/Table.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+export type Row = {
+	name: string
+	class?: string
+	width?: string
+	type?: "image"
+	displayName?: string
+}
+
+type TableProps = {
+	rows: Row[]
+	data: any
+}
+
+const { rows, data } = defineProps<TableProps>()
+</script>
+
+<template>
+	<table>
+		<thead>
+			<tr>
+				<th
+					v-for="row in rows"
+					:key="row.name"
+					:class="row.class"
+					:style="{ width: row.width }"
+				>
+					{{ row.displayName || row.name }}
+				</th>
+			</tr>
+		</thead>
+		<tbody>
+			<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>
+					</slot>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</template>