owltide/components/DiffEntry.vue

<!--
	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
	SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<div
		v-if="entries.length"
		class="diffEntry"
	>
		<div class="title">
			{{ title }}:
		</div>
		<div
			v-for="[type, text], index in entries"
			:key="index"
			:class="type"
		>
			{{ text }}
		</div>
	</div>
</template>

<script lang="ts" setup>
defineProps<{
	title: string,
	entries: (["removed" | "added", string][]);
}>();
</script>

<style scoped>
.diffEntry {
	display: grid;
	grid-template-columns: 5rem 1fr;
	column-gap: 1rem;
}
.removed {
	grid-column: 2 / 2;
	color: color-mix(in srgb, CanvasText, red 40%);
}
.removed::before {
	content: "- ";
	font-family: monospace;
}
.added {
	grid-column: 2 / 2;
	color: color-mix(in srgb, CanvasText, green 40%);
}
.added::before {
	content: "+ ";
	font-family: monospace;
}
</style>