Initial commit

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

@@ -0,0 +1,48 @@
+<script setup>
+const props = defineProps({
+  replies: Array,
+  activeModelColor: String,
+  isInputCentered: Boolean,
+});
+const emit = defineEmits(['select']);
+</script>
+
+<template>
+  <div class="quick-replies-container">
+    <div
+      v-for="(reply, index) in replies"
+      :key="index"
+      class="quick-reply-item"
+    >
+      <VBtn
+        :variant="isInputCentered ? 'tonal' : 'outlined'"
+        :color="activeModelColor"
+        size="small"
+        @click="emit('select', reply)"
+        class="w-100"
+      >
+        {{ reply }}
+      </VBtn>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.quick-replies-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  grid-gap: 8px;
+  margin-bottom: 8px;
+  width: 100%;
+}
+
+@media (max-width: 600px) {
+  .quick-replies-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.quick-reply-item {
+  width: 100%;
+}
+</style>