1 files changed, 40 insertions, 0 deletions
diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte
new file mode 100644
index 0000000..7aa9670
--- /dev/null
+++ b/frontend/src/lib/pills/Pill.svelte
@@ -0,0 +1,40 @@
+<script lang="ts" context="module">
+	export type PillColour = 'pink' | 'blue' | 'violet' | 'amber' | 'zinc' | 'sky';
+</script>
+
+<script lang="ts">
+	export let name: string;
+	export let tooltip: string | null | undefined = undefined;
+	export let colour: PillColour = 'zinc';
+</script>
+
+<div class="flex items-center rounded border p-0.5 {colour}" title={tooltip}>
+	<slot name="icon" />
+	<span>{name}</span>
+</div>
+
+<style lang="postcss">
+	.pink {
+		@apply border-pink-800 bg-pink-800/20 text-pink-200;
+	}
+
+	.blue {
+		@apply border-blue-800 bg-blue-800/20 text-blue-200;
+	}
+
+	.violet {
+		@apply border-violet-800 bg-violet-800/20 text-violet-200;
+	}
+
+	.amber {
+		@apply border-amber-800 bg-amber-800/20 text-amber-200;
+	}
+
+	.sky {
+		@apply border-sky-800 bg-sky-800/20 text-sky-200;
+	}
+
+	.zinc {
+		@apply border-zinc-700 bg-zinc-700/20 text-zinc-300;
+	}
+</style>