bravio init project

components/SliceFeedback.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="flex flex-col justify-center items-start space-y-4">
+    <h1 class="text-3xl font-bold">
+      {{ data.title }}
+    </h1>
+    <p class="text-sm" v-html="feedbackText"></p>
+    <button-CTA
+      color="accent"
+      class="ml-auto"
+      @click="$emit('next')"
+    >
+      {{ data.button }}
+    </button-CTA>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    currentIndex: { type: Number, default: 0 },
+    total: { type: Number, default: 1 }
+  },
+  emits: ["next", "previous"],
+  data() {
+    return {
+      feedbackText: ""
+    }
+  },
+  mounted() {
+    this.generateFeedbackText();
+  },
+  methods: {
+    generateFeedbackText() {
+      const results = JSON.parse(localStorage.getItem('results'));
+      if (!results) {
+        this.feedbackText = "No hay resultados disponibles.";
+        return;
+      }
+
+      // Buscar el resultado correspondiente al bloque actual buscando en el array results donde algun objeto tenga el mismo sectionId que this.data.sectionId
+      const blockId = this.data.section.id;
+      const blockResult = results.find(r => r.sectionId === blockId);
+      this.feedbackText = blockResult ? blockResult.result : "No hay feedback disponible para este bloque.";
+    }
+  }
+}
+</script>