web: dist-tag chips share the Beta chip's shape

Author: rigor789

web/src/components/BetaChip.vue

@@ -1,7 +1,7 @@
+<script setup lang="ts">
+import Chip from "./Chip.vue";
+</script>
+
 <template>
-	<span
-		class="inline-flex items-center rounded-md border border-amber-300/70 bg-amber-50 px-1.5 py-px text-[10px] leading-4 font-medium text-amber-700 dark:border-amber-600/50 dark:bg-amber-950/40 dark:text-amber-300"
-	>
-		Beta
-	</span>
+	<Chip tone="beta">Beta</Chip>
 </template>

web/src/components/Chip.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ tone?: "info" | "beta" }>(), { tone: "info" });
+
+const TONES = {
+	info: "border-sky-300/70 bg-sky-50 text-sky-700 dark:border-sky-600/50 dark:bg-sky-950/40 dark:text-sky-300",
+	beta: "border-amber-300/70 bg-amber-50 text-amber-700 dark:border-amber-600/50 dark:bg-amber-950/40 dark:text-amber-300",
+};
+</script>
+
+<template>
+	<span class="inline-flex items-center rounded-md border px-1.5 py-px text-[10px] leading-4 font-medium" :class="TONES[tone]">
+		<slot />
+	</span>
+</template>

web/src/components/CompatGrid.vue

@@ -4,6 +4,7 @@ import { computed, watch } from "vue";
 import { summarizeCell } from "../../../shared/compute";
 import { TOOLCHAIN_LABELS, type CompatibilityDocument, type ToolchainKey } from "../../../shared/types";
 import CellDetails from "./CellDetails.vue";
+import Chip from "./Chip.vue";
 import CompatCell from "./CompatCell.vue";
 import type { OpenCell } from "../urlState";
 
@@ -138,13 +139,7 @@ const headCell = `sticky z-10 bg-neutral-50 text-center font-semibold dark:bg-ne
 								:title="`${group.name}@${version} on npm`"
 							><code>{{ version }}</code></a>
 							<div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1">
-								<span
-									v-for="tag in group.tags.get(version) ?? []"
-									:key="tag"
-									class="rounded-full bg-sky-100 px-2 py-0.5 text-[11px] font-semibold text-sky-700 dark:bg-sky-900/60 dark:text-sky-300"
-								>
-									{{ tag }}
-								</span>
+								<Chip v-for="tag in group.tags.get(version) ?? []" :key="tag">{{ tag }}</Chip>
 							</div>
 						</th>
 						<template v-for="key in ALL_KEYS" :key="key">