all repos — stealth-developers @ 744ff75068cea815025a45050f0958013852d911

apps/web/src/components/Tickets/TicketComments.vue (view raw)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 
<script setup lang="ts">
import type { SanitisedTicketComment } from "@stealth-developers/api";
import UserChip from "@/components/UserChip.vue";

defineProps<{
	comments: SanitisedTicketComment[];
}>();
</script>

<template>
	<div class="ticket-comments" v-if="comments.length > 0">
		<h2>Comments</h2>
		<div class="comments-list">
			<div v-for="comment in comments" :key="comment.id" class="comment">
				<UserChip :user="comment.actors?.author" />
				<p class="comment-text">{{ comment.content }}</p>
			</div>
		</div>
	</div>
</template>

<style scoped>
.ticket-comments {
	display: flex;
	flex-direction: column;
	background-color: hsl(var(--crust));
	border-radius: 1.5rem;
	overflow: hidden;
	margin-bottom: 0.5rem;

	h2 {
		padding: 0.5rem 1rem;
		font-size: 1.5rem;
		font-weight: 800;
		color: hsl(var(--text));
	}

	.comments-list {
		display: flex;
		flex-direction: column;
		background-color: hsl(var(--crust));

		.comment {
			display: flex;
			flex-direction: column;
			gap: 0.75rem;
			padding: 0.5rem 1rem;

			&:hover {
				background-color: hsla(var(--surface0) / 0.25);
				transition: none;
			}
		}
	}
}
</style>