adds validation

resources/js/Components/QuestionCard.vue

@@ -11,6 +11,10 @@ const props = defineProps({
     type: Object,
     default: () => ({ value: null, text_value: '' }),
   },
+  error: {
+    type: String,
+    default: null,
+  },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -58,7 +62,10 @@ const updateTextValue = (event) => {
 </script>
 
 <template>
-    <div class="py-5 first:pt-0">
+    <div
+        class="py-5 first:pt-0 transition-all duration-200"
+        :class="{ 'border-l-2 border-red-400/60 pl-4 -ml-4': error }"
+    >
         <p class="text-white font-medium leading-relaxed mb-4">{{ question.text }}</p>
 
         <!-- Text-only question (no radio buttons) -->
@@ -105,5 +112,19 @@ const updateTextValue = (event) => {
                 </div>
             </Transition>
         </div>
+
+        <!-- Error message -->
+        <Transition
+            enter-active-class="transition-all duration-200 ease-out"
+            enter-from-class="opacity-0 -translate-y-1"
+            enter-to-class="opacity-100 translate-y-0"
+            leave-active-class="transition-all duration-150 ease-in"
+            leave-from-class="opacity-100 translate-y-0"
+            leave-to-class="opacity-0 -translate-y-1"
+        >
+            <p v-if="error" class="text-red-400 text-sm mt-2 bg-red-500/10 px-3 py-2 rounded-md">
+                {{ error }}
+            </p>
+        </Transition>
     </div>
 </template>