summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/pills/Pill.svelte
diff options
context:
space:
mode:
authorWolfgang Müller2024-03-05 18:08:09 +0100
committerWolfgang Müller2024-03-05 19:25:59 +0100
commitd1d654ebac2d51e3841675faeb56480e440f622f (patch)
tree56ef123c1a15a10dfd90836e4038e27efde950c6 /frontend/src/lib/pills/Pill.svelte
downloadhircine-d1d654ebac2d51e3841675faeb56480e440f622f.tar.gz
Initial commit0.1.0
Diffstat (limited to '')
-rw-r--r--frontend/src/lib/pills/Pill.svelte40
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>