From f303cb1171ad1914c3ec4d16a648322006da55d2 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Thu, 29 May 2025 22:19:51 -0400
Subject: [PATCH] implement SkBadgeStrip

---
 .../frontend/src/components/SkBadgeStrip.vue  | 84 +++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 packages/frontend/src/components/SkBadgeStrip.vue

diff --git a/packages/frontend/src/components/SkBadgeStrip.vue b/packages/frontend/src/components/SkBadgeStrip.vue
new file mode 100644
index 0000000000..6611d35b07
--- /dev/null
+++ b/packages/frontend/src/components/SkBadgeStrip.vue
@@ -0,0 +1,84 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.badges">
+	<div
+		v-for="badge of badges"
+		:key="badge.key"
+		:class="[$style.badge, semanticClass(badge)]"
+	>
+		{{ badge.label }}
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+export interface Badge {
+	/**
+	 * ID/key of this badge, must be unique within the strip.
+	 */
+	key: string;
+
+	/**
+	 * Label text to display.
+	 * Should already be translated.
+	 */
+	label: string;
+
+	/**
+	 * Semantic style of the badge.
+	 * Defaults to "neutral" if unset.
+	 */
+	style?: 'success' | 'neutral' | 'warning' | 'error';
+}
+</script>
+
+<script setup lang="ts">
+import { useCssModule } from 'vue';
+
+const $style = useCssModule();
+
+defineProps<{
+	badges: Badge[],
+}>();
+
+function semanticClass(badge: Badge): string {
+	const style = badge.style ?? 'neutral';
+	return $style[`semantic_${style}`];
+}
+</script>
+
+<style module lang="scss">
+.badges {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: var(--MI-margin);
+}
+
+.badge {
+	display: inline-block;
+	border: solid 1px;
+	border-radius: var(--MI-radius-sm);
+	padding: 2px 6px;
+	font-size: 85%;
+}
+
+.semantic_error {
+	color: var(--MI_THEME-error);
+	border-color: var(--MI_THEME-error);
+}
+
+.semantic_warning {
+	color: var(--MI_THEME-warn);
+	border-color: var(--MI_THEME-warn);
+}
+
+.semantic_success {
+	color: var(--MI_THEME-success);
+	border-color: var(--MI_THEME-success);
+}
+</style>