all repos — stealth-developers @ 177530ec8ef12acd4a8d923b731a77bdf8e3da72

apps/web/src/components/Tickets/TicketReasons.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
 57
 58
 59
 60
 61
 62
 
<script setup lang="ts">
import type { SanitisedTicket } from "@stealth-developers/api";

defineProps<{
	ticket: SanitisedTicket;
}>();
</script>

<template>
	<div
		class="ticket-reasons"
		v-if="ticket.openReason || ticket.closeReason || ticket.privateReason"
	>
		<div class="reason-card" v-if="ticket.openReason">
			<span class="reason-label">Open Reason</span>
			<p class="reason-value">{{ ticket.openReason }}</p>
		</div>
		<div class="reason-card" v-if="ticket.closeReason">
			<span class="reason-label">Close Reason</span>
			<p class="reason-value">{{ ticket.closeReason }}</p>
		</div>
		<div class="reason-card private" v-if="ticket.privateReason">
			<span class="reason-label">Private Reason</span>
			<p class="reason-value">{{ ticket.privateReason }}</p>
		</div>
	</div>
</template>

<style scoped>
.ticket-reasons {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;

	@media (min-width: 768px) {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}

	.reason-card {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
		background-color: hsl(var(--crust));
		padding: 1rem;
		border-radius: 1.5rem;

		.reason-label {
			font-size: 0.75rem;
			font-weight: 900;
			text-transform: uppercase;
			color: hsl(var(--subtext0));
		}

		.reason-value {
			font-size: 0.95rem;
			color: hsl(var(--text));
			white-space: pre-wrap;
			line-height: 1.5;
		}
	}
}
</style>