From dee7456a1d3a4d454ea5e70f2a8d0bb0b38be3c1 Mon Sep 17 00:00:00 2001
From: Bernt Popp <bernt.popp@gmail.com>
Date: Thu, 21 Mar 2024 08:44:10 +0100
Subject: [PATCH] feat: remove ErrorDialog and replace with HelpDialog

---
 src/components/ErrorDialog.vue | 34 -------------------
 src/components/HelpDialog.vue  | 60 ++++++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 34 deletions(-)
 delete mode 100644 src/components/ErrorDialog.vue
 create mode 100644 src/components/HelpDialog.vue

diff --git a/src/components/ErrorDialog.vue b/src/components/ErrorDialog.vue
deleted file mode 100644
index 58a6913..0000000
--- a/src/components/ErrorDialog.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<!-- components/ErrorDialog.vue -->
-<template>
-  <v-dialog width="470">
-    <v-card style="padding: 10px 0">
-      <v-card-title
-        style="font-family: google-sans, sans-serif; font-size: 24px"
-      >
-        {{ error.title }}
-      </v-card-title>
-      <v-card-text>
-        {{ error.message }}
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer />
-        <v-btn color="primary" elevation="0" @click="$emit('value', false)"
-          >Ok</v-btn
-        >
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script>
-export default {
-  name: "ErrorDialog",
-
-  props: {
-    error: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-};
-</script>
diff --git a/src/components/HelpDialog.vue b/src/components/HelpDialog.vue
new file mode 100644
index 0000000..6ded4ff
--- /dev/null
+++ b/src/components/HelpDialog.vue
@@ -0,0 +1,60 @@
+<!-- components/HelpDialog.vue -->
+<template>
+  <v-dialog
+    width="auto"
+    v-model="dialog"
+  >
+    <v-card :style="cardStyle">
+      <v-card-title :style="titleStyle">
+        {{ title }}
+      </v-card-title>
+      <!-- Use a div instead of v-card-text to avoid the warning and still render HTML -->
+      <div v-html="content" class="v-card-text" :style="contentStyle">
+      </div>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn color="primary" elevation="0" @click="dialog = false">Ok</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: "HelpDialog",
+
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    config: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data () {
+    return {
+      dialog: false,
+    }
+  },
+  computed: {
+    cardStyle() {
+      return this.config.cardStyle || { padding: '10px 0' };
+    },
+    titleStyle() {
+      return this.config.titleStyle || { fontFamily: 'google-sans, sans-serif', fontSize: '24px' };
+    },
+    contentStyle() {
+      // You can define default styles or pull them from config
+      return this.config.contentStyle || {};
+    },
+  },
+  methods: {
+  },
+};
+</script>