Update (ui)

resources/js/vue/front/OpenNewsBite.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <!-- Button to open the modal -->
+    <button type="button" :class="thisClass" @click="openModal">
+      🍪 Read Bite ({{ minRead }})
+    </button>
+
+    <!-- Bootstrap Modal -->
+    <div
+      class="modal"
+      ref="modal"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="modalLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <div
+            class="modal-header text-start font-family-roboto-condensed fw-bolder"
+          >
+            <h5 class="modal-title" id="modalLabel">The Bite: {{ title }}</h5>
+            <button
+              type="button"
+              class="btn-close"
+              @click="closeModal"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div class="modal-body text-start small">
+            <p v-html="bite"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Modal } from "bootstrap";
+
+export default {
+  name: "OpenNewsBite",
+  props: ["title", "bite", "thisClass", "minRead"],
+  data() {
+    return {
+      modalInstance: null,
+    };
+  },
+  methods: {
+    openModal() {
+      this.modalInstance = new Modal(this.$refs.modal, {
+        keyboard: false,
+      });
+      this.modalInstance.show();
+    },
+    closeModal() {
+      if (this.modalInstance) {
+        this.modalInstance.hide();
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* Add any additional styling here */
+</style>