refactor: reuse badge component

web/src/lib/components/schema/SchemaTextResult.svelte

@@ -2,6 +2,7 @@
 	import { verdictText, verdictTone } from "$lib/i18n/schema-tool-strings";
 	import { t } from "$lib/i18n/t";
 	import { Copy, Download, FileText } from "@lucide/svelte";
+	import Badge from "$lib/components/ui/Badge.svelte";
 	import IconButton from "$lib/components/ui/IconButton.svelte";
 
 	interface Props {
@@ -32,14 +33,16 @@
 {#if kind === "verdict"}
 	<div class="verdict">
 		<span class="verdict-label">{t("resultCard.result")}</span>
-		<div
+		<Badge
+			{tone}
+			variant="tint"
+			size="m"
 			data-testid="result-verdict"
-			class="badge badge-tone--{tone}"
 			role="status"
 		>
-			<span class="verdict-text">{displayValue}</span>
+			{displayValue}
 			<IconButton icon={Copy} label={t("textResult.copy")} onclick={oncopy} />
-		</div>
+		</Badge>
 	</div>
 {:else}
 	<div class="text-result">
@@ -109,31 +112,4 @@
 		letter-spacing: var(--space-text-l);
 		text-transform: uppercase;
 	}
-	.badge {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--space-l);
-		padding: var(--space-m) var(--space-xl);
-		border: var(--size-border-thick) solid transparent;
-		border-radius: var(--radius-m);
-		font: var(--font-size-m) var(--font-mono);
-	}
-	.badge-tone--success {
-		background: var(--color-success-tint);
-		border-color: var(--color-success);
-		color: var(--color-success);
-	}
-	.badge-tone--danger {
-		background: var(--color-danger-tint);
-		border-color: var(--color-danger);
-		color: var(--color-danger);
-	}
-	.badge-tone--info {
-		background: var(--color-info-tint);
-		border-color: var(--color-info);
-		color: var(--color-info);
-	}
-	.verdict-text {
-		line-height: normal;
-	}
 </style>

web/src/lib/components/ui/Badge.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { Check } from "@lucide/svelte";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	const ToneVariantDefine = {
 		DEFAULT: "default",
@@ -15,28 +17,43 @@
 		DEFAULT: "default",
 		OUTLINE: "outline",
 		CLEAR: "clear",
+		TINT: "tint",
 	} as const;
 	type BadgeVariant =
 		(typeof BadgeVariantDefine)[keyof typeof BadgeVariantDefine];
 
-	interface Props {
+	const BadgeSizeDefine = {
+		S: "s",
+		M: "m",
+	} as const;
+	type BadgeSize = (typeof BadgeSizeDefine)[keyof typeof BadgeSizeDefine];
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
 		tone?: ToneVariant;
 		variant?: BadgeVariant;
+		size?: BadgeSize;
 		check?: boolean;
 		label?: string;
+		children?: Snippet;
 	}
 
 	let {
 		tone = ToneVariantDefine.DEFAULT,
 		variant = BadgeVariantDefine.DEFAULT,
+		size = BadgeSizeDefine.S,
 		check = false,
 		label = "",
+		children,
+		...rest
 	}: Props = $props();
 </script>
 
-<span class="badge badge-tone--{tone} badge-variant--{variant}">
+<span
+	class="badge badge-tone--{tone} badge-variant--{variant} badge-size--{size}"
+	{...rest}
+>
 	{#if check}<Check size={12} />{/if}
-	{label}
+	{#if children}{@render children()}{:else}{label}{/if}
 </span>
 
 <style>
@@ -94,4 +111,18 @@
 		border-color: transparent;
 		color: var(--color-badge-tint);
 	}
+
+	.badge-variant--tint {
+		background-color: var(--color-badge-tint);
+		border-style: solid;
+		border-color: var(--color-badge-main);
+		border-radius: var(--radius-m);
+		color: var(--color-badge-main);
+	}
+
+	.badge-size--m {
+		gap: var(--space-l);
+		padding: var(--space-m) var(--space-xl);
+		font-size: var(--font-size-m);
+	}
 </style>

web/src/routes/kit/+page.svelte

@@ -147,6 +147,13 @@
 				<Badge tone="warning" label="warning" />
 				<Badge tone="info" label="info" />
 			</SettingGroup>
+			<SettingGroup label="variants">
+				<Badge tone="success" variant="outline" label="outline" />
+				<Badge tone="success" variant="clear" label="clear" />
+				<Badge tone="success" variant="tint" label="tint" />
+				<Badge tone="danger" variant="tint" label="tint" />
+				<Badge tone="info" variant="tint" size="m" label="tint m" />
+			</SettingGroup>
 		</div>
 	</Panel>