From d1d654ebac2d51e3841675faeb56480e440f622f Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Tue, 5 Mar 2024 18:08:09 +0100
Subject: Initial commit

---
 frontend/src/lib/pills/Pill.svelte | 40 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 frontend/src/lib/pills/Pill.svelte

(limited to 'frontend/src/lib/pills/Pill.svelte')

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>
-- 
cgit v1.2.3-2-gb3c3