sfp_vue_franchisor_ginastica_cerebro/src/pages/kanban/components/KanbanCommentCard.vue

<template>
  <q-card flat bordered class="q-pa-md">
    <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 8px">
      <div style="flex: 1">
        <div class="text-body2">
          <span class="text-weight-medium">Comentário:</span> {{ reply }}
        </div>
        <div class="text-caption text-grey-6 q-mt-xs">
          {{ createdAt }} &mdash; {{ userName }}
        </div>
      </div>
      <div style="display: flex; gap: 4px; flex-shrink: 0">
        <q-btn
          v-if="canEdit"
          flat
          dense
          round
          icon="mdi-pencil-outline"
          size="sm"
          color="primary"
          @click="$emit('edit')"
        />
        <q-btn
          v-if="canDelete"
          flat
          dense
          round
          icon="mdi-trash-can-outline"
          size="sm"
          color="negative"
          @click="$emit('delete')"
        />
      </div>
    </div>
  </q-card>
</template>

<script setup>
defineEmits(["edit", "delete"]);

defineProps({
  canEdit: { type: Boolean, default: false },
  canDelete: { type: Boolean, default: false },
  reply: {
    type: String,
    required: true,
  },
  createdAt: {
    type: String,
    required: true,
  },
  userName: {
    type: String,
    required: true,
  },
});
</script>