Initial commit

resources/js/pages/apps/components/FormQuestion.vue

@@ -0,0 +1,54 @@
+<script setup>
+const props = defineProps({
+  form: Object,
+  activeModelColor: String,
+});
+const emit = defineEmits(["select"]);
+</script>
+
+<template>
+  <div class="form-container">
+    <div class="form-title font-weight-bold mb-2">
+      {{ form.title }}
+    </div>
+    <div class="form-question mb-3">
+      {{ form.question }}
+    </div>
+    <div class="form-options d-flex gap-2">
+      <VBtn
+        v-for="(option, optIndex) in form.options"
+        :key="optIndex"
+        :color="activeModelColor"
+        variant="outlined"
+        size="small"
+        class="form-option-btn"
+        @click="emit('select', option)"
+      >
+        {{ option }}
+      </VBtn>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.form-title {
+  font-size: 1.1rem;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.form-question {
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.form-options .form-option-btn {
+  margin-bottom: 8px;
+  border-radius: 8px;
+  text-transform: none;
+}
+
+.form-options .form-option-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+</style>