From 8e9d29327d04e55c58a8828f2ad23a7a15de276b Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Tue, 30 Jul 2024 18:31:53 +0200
Subject: [PATCH] Add Element Display

---
 .../src/components/display/ElementDisplay.vue | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 client/src/components/display/ElementDisplay.vue

diff --git a/client/src/components/display/ElementDisplay.vue b/client/src/components/display/ElementDisplay.vue
new file mode 100644
index 0000000..30e9a76
--- /dev/null
+++ b/client/src/components/display/ElementDisplay.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  data: any,
+  component?: string,
+  componentProp?: '',
+}>(), {
+  data: '',
+  component: '',
+  componentProp: '',
+});
+</script>
+<template>
+  <div v-if="data" class="pillbar">
+    <div class="pill">
+      <component v-bind="{[props.componentProp]: props.data}" :is="props.component" v-if="props.component !== ''"/>
+      <template v-else>{{ props.data }}</template>
+    </div>
+  </div>
+</template>