53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<template>
|
|
<div>
|
|
<h2 class="hidden lg:mb-12 lg:block">{{ title }}</h2>
|
|
<div
|
|
class="b-0 flex flex-col lg:flex-row lg:items-center lg:border lg:border-gray-400 lg:p-8"
|
|
>
|
|
<img
|
|
v-if="showAvatar"
|
|
:src="avatarUrl"
|
|
class="mb-6 h-16 w-16 rounded-full lg:mr-12"
|
|
/>
|
|
<h2 class="mb-8 block lg:hidden">{{ title }}</h2>
|
|
<div>
|
|
<p class="mb-6">{{ description }}</p>
|
|
<button
|
|
v-if="!feedbackSent"
|
|
class="btn-primary"
|
|
data-cy="sendFeedbackButton"
|
|
@click="$emit('sendFeedback')"
|
|
>
|
|
{{ $t("feedback.sendFeedback") }}
|
|
</button>
|
|
<p v-else class="flex items-center bg-green-200 px-6 py-4">
|
|
<it-icon-check
|
|
class="mr-2 inline-block h-7 w-7 text-green-800"
|
|
></it-icon-check>
|
|
{{ $t("feedback.feedbackSent") }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
avatarUrl?: string;
|
|
title?: string;
|
|
description?: string;
|
|
feedbackSent?: boolean;
|
|
showAvatar?: boolean;
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
avatarUrl: "",
|
|
title: "",
|
|
description: "",
|
|
feedbackSent: false,
|
|
showAvatar: true,
|
|
});
|
|
|
|
defineEmits(["sendFeedback"]);
|
|
</script>
|